时间戳

首页 > 解决方案 > jQuery单击具有ajax回调的按钮不起作用

javascript - jQuery单击具有ajax回调的按钮不起作用

问题描述

我有一个 Drupal 网站，我创建了一个带有 ajax 回调按钮的表单，回调工作正常，但现在我想在使用单击提交按钮时抛出一个小 javascript 函数。

我不想为这个小功能创建一个单独的文件来与drupal一起使用它，所以我尝试使用jquery click元素：

$(document).on('click', '#commerce-checkout-coupon-ajax-wrapper button', function(){
    console.log("test");
});

或者

$('#commerce-checkout-coupon-ajax-wrapper button').on('click', function(){
    console.log("test");
});

但这不起作用，日志没有被触发。所有其他事件（悬停，鼠标输入等）工作正常，但单击它不起作用，按钮启动对他的drupal函数的ajax调用，但它没有启动我的javascript函数。

我能做些什么 ？我想做的事情是当我们点击按钮时从屏幕上删除一些东西。

编辑：这是表单的 html（由 drupal 生成）

<div id="edit-commerce-coupon--2" class="form-wrapper">
  <div class="form-item form-item-commerce-coupon-coupon-code form-type-textfield form-group"> 
  <label class="control-label" for="edit-commerce-coupon-coupon-code--2">Code Promo</label>
  <input class="form-control form-text" title="" data-toggle="tooltip" type="text" id="edit-commerce-coupon-coupon-code--2" name="commerce_coupon[coupon_code]" value="" size="60" maxlength="128" data-original-title="Saisir le code de votre coupon ici.">
  </div>
  <button type="submit" id="edit-commerce-coupon-coupon-add--2" name="coupon_add" value="Ajouter" class="btn btn-success form-submit icon-before ajax-processed"><span class="icon glyphicon glyphicon-plus" aria-hidden="true"> 
</span> Ajouter</button>

编辑 ：

我还尝试了另一种可行的方法（我认为），它与 focusout ：

 $('#commerce-checkout-coupon-ajax-wrapper .form-control.form-text').focusout(function (e) {
    console.log("test");
    $('.tooltip').remove();
});

问题类似，当我点击按钮时输入不会失去焦点，所以工具提示留在页面上

标签： javascriptjqueryajaxdrupal

解决方案

您可以尝试解决方法：

(function($){
  $(document).ready(function(){
     $('button[id*="edit-commerce-coupon-coupon-add"]').on('click', function(){
         console.log('test');
     });
  });

})(jQuery);

还要确保您已正确附加您的 js 文件以形成

$form['#attached']['js'][] = 'pathtomyfile.js';

推荐阅读