Question

我使用jQuery创建一个简单的概念证明页面：

    $('.notclicked').click(function() {
    $(this).addClass("clicked");
    $(this).removeClass("notclicked");
      $('.maps-cont').animate({
        left: '0'
      }, 500, function() {
        // Animation complete.
      });
    });

    $('.clicked').click(function() {
    $(this).addClass("notclicked");
    $(this).removeClass("clicked");
      $('.maps-cont').animate({
        left: '-320px'
      }, 500, function() {
        // Animation complete.
      });
    });

想法是点击div.notclicked做动画的第一部分，然后将类更改为div.clicked，然后随着类的更改，可以使用第二位代码触发动画的第二部分。但是由于某种原因，代码的第二部分不起作用，未分配新类并且动画不会运行。

这只是一个概念验证，所以我知道在动画进行过程中点击可能会导致问题。而不是让我的代码完全重写为可能更好但我不会理解的东西，如果我用它做了一个简单的错误，我宁愿修改这段代码。谢谢

Answer 1

尝试使用.on来附加您的点击事件，因为具有指定类的未来元素不会附加事件处理程序。 .on现在和将来绑定事件处理程序。

在下面的代码中，您可以使用包含该元素的父元素替换document。我只是以文档为例。

$(document).on('click','.clicked', function() {    
  $(this).removeClass("clicked").addClass('notclicked');
});

$(document).on('click', '.notclicked' ,function() {       
  $(this).removeClass("notclicked").addClass('clicked'); 
});

这是一个fiddle。

Answer 2

click事件处理程序绑定到调用click方法时与选择器匹配的DOM实体。请改用on方法：

$('#idOfParentElement').on('click', '.clicked', function(e) { ... });

Answer 3

您只需一个处理程序即可管理它。

//Assuming the default class on the element is notclicked
$('.notclicked').click(function() {
      var $this = $(this);
      $('.maps-cont').animate({
         left: $this.hasClass('notclicked') ? '0' : '-320px'
      }, 500, function() {
        // Animation complete.
      });
      $this.addClass("clicked").removeClass("notclicked");
});

$('.clicked').click(function(){....})无效，因为页面加载$('.clicked')给出了空集，因此jQuery无法在其上附加事件处理程序。

Answer 4

有点违背我不想改写我的代码的愿望，但是看看on方法真的让我感到困惑，所以我用它来管理它：

    $('.filters').toggle(
       function()
       {
          $('.maps-cont').animate({
          left: "0"
    }, 500);
       },
       function()
       {
          $('.maps-cont').animate({
          left: "-320"
          }, 500);
    });

jQuery添加和删除类 - 动画的下半部分不起作用

4 个答案: