为什么 jquery 不能（总是）处理多个 ajax 调用？

Question

我是一个 jquery 新手，我设法将以下脚本放在一起，让一个 div 从下方向上滑动，当单击“X”时它会消失：

jQuery(document).ajaxComplete(function() {

  $('#spendenbanner-schliessen').click(function(){
    $('#spendenbanner').slideUp();
    var date = new Date();
    var m = 5; /* Make cookie expire after m minutes */
    date.setTime(date.getTime() + (m * 60 * 1000));
    $.cookie('noSpende', '1', { expires: date, path: '/' });
  });

  if($.cookie('noSpende') > null) {
    $('#spendenbanner').hide();
  }
});

jQuery(document).ready(function() {

  $('#spendenbanner-schliessen').click(function(){
    $('#spendenbanner').slideUp();
    var date = new Date();
    var m = 5; /* Make cookie expire after m minutes */
    date.setTime(date.getTime() + (m * 60 * 1000));
    $.cookie('noSpende', '1', { expires: date, path: '/' });
  });

  if($.cookie('noSpende') > null) {
    $('#spendenbanner').hide();
  }
});

如您所见，我已经复制了代码，因为一个只在没有 ajax 的情况下工作，另一个在 ajax 下工作。 HTML 类似于以下内容：

<div id="spendenbanner">
  <div class="spendenbanner-text">
    <div id="spendenbanner-schliessen">X</div>
    <p>Some Text</p>
    </div>
  </div>
</div>

这确实适用于提到的重复。但是一旦我在页面上有另一个 ajax 块，点击“X”就没有任何效果。有人可以帮我解决这个问题吗？我已经花了好几个小时，但我无法找到正确的方法。

Answer 1

你应该使用 Drupal.behaviors ->

Drupal.behaviors.blockSlide = {
  attach: function (context, settings) {
      $('#spendenbanner-schliessen').click(function(){
          $('#spendenbanner').slideUp();
          var date = new Date();
          var m = 5; /* Make cookie expire after m minutes */
          date.setTime(date.getTime() + (m * 60 * 1000));
          $.cookie('noSpende', '1', { expires: date, path: '/' });
        });
        
      if($.cookie('noSpende') > null) {
        $('#spendenbanner').hide();
      }    
  }
};

另外我完全推荐阅读这个：https://www.lullabot.com/articles/understanding-javascript-behaviors-in-drupal

行为与 Drupal 中的 Ajax 调用配合得更好 :)

Answer 2

这可能是因为您试图将点击事件与从 ajax 响应创建的动态元素绑定。要解决这个问题，您可以使用“on”或“live”处理程序将元素和事件绑定一次。

jQuery(document).ready(function() {

  $(document).on("click", '#spendenbanner-schliessen', function() { 

    $('#spendenbanner').slideUp();
    var date = new Date();
    var m = 5; /* Make cookie expire after m minutes */
    date.setTime(date.getTime() + (m * 60 * 1000));
    $.cookie('noSpende', '1', { expires: date, path: '/' });
  });

  if($.cookie('noSpende') > null) {
    $('#spendenbanner').hide();
  }
});

或

jQuery(document).ready(function() {

  $('#spendenbanner-schliessen').live("click", function(){
    $('#spendenbanner').slideUp();
    var date = new Date();
    var m = 5; /* Make cookie expire after m minutes */
    date.setTime(date.getTime() + (m * 60 * 1000));
    $.cookie('noSpende', '1', { expires: date, path: '/' });
  });

  if($.cookie('noSpende') > null) {
    $('#spendenbanner').hide();
  }
});

希望这对你有用。