Question

我有一个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");
});

但这不起作用，不会触发日志。所有其他事件（悬停，mouseenter等）都可以正常运行，但单击不起作用，该按钮将启动对他的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>

编辑：

我还尝试了另一种可行的方法（我认为），即通过聚焦：

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

问题相似，当我单击按钮时输入不会失去焦点，因此工具提示会停留在页面上

Answer 1

您可以尝试解决方法：

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

})(jQuery);

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

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

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

1 个答案: