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 - ＆gt;

＆＃13;

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();
      }    
  }
};

＆＃13;

此外，我完全建议您阅读：https://www.lullabot.com/articles/understanding-javascript-behaviors-in-drupal

使用Drupal中的Ajax调用可以更好地处理行为：）

Answer 2

这可能是因为你试图将click事件与从ajax响应创建的动态元素绑定。为了解决这个问题，您可以使用＆＃34; on＆＃34;或者＆＃34;生活＆＃34;处理程序只绑定元素和事件一次。

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();
  }
});

希望这对你有用。

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

2 个答案: