3

我有一堆 div，每个 div 都包含一个带有以下点击事件的删除链接：

  var observeRemoveRoom = function
    $('.remove_room').click(function(){     
      $(this).parent().removeClass('active');
    });
  }

单击它会删除父级（div）的“活动”类。observeRemoveRoom我在窗口加载时调用这个函数，它工作正常。

问题是，我有另一个函数可以添加更多相同的 div。由于a.remove_room新 div 中包含的链接不在window.load我需要调用的地方observeRemoveRoom。

我是否以某种方式复制了事件处理程序？jQuery 会覆盖它们吗？如果是这样，我应该取消绑定处理程序吗？

4

3 回答 3

3

每次调用observeRemoveRoomjQuery 都会为单击事件添加一个新的唯一事件处理函数。

所以是的，您需要.unbind()通过不带参数调用来绑定所有当前绑定的处理程序.unbind()，或者具体并传入函数引用。

于 2012-07-11T10:50:56.767 回答
1

是的，如果您再次调用，您将复制事件处理程序observeRemoveRoom，但这可能不会引起注意，因为您只是调用在removeClass找不到类时不执行任何操作的方法，这将是第一个侦听器被触发后的情况。

相反，您可以每次取消绑定并重新绑定点击事件，例如：

 var observeRemoveRoom = function(){
    var remove_class = function(){     
      $(this).parent().removeClass('active');
    };
    $('.remove_room').off('click', remove_class).on('click', remove_class);
  }

但是就是说，建议您在此函数之外执行此操作，而不是每次都绑定和取消绑定事件，例如：

$(document).ready(function(){
    var remove_class = function(){     
      $(this).parent().removeClass('active');
    };
    // If the element exists at dom ready, you can bind the event directly
    $('.remove_room').on("click", remove_class);
    // If the element is added in dynamically, you can [delegate][1] the event
    $('body').on("click", '.remove_room', remove_class);
    // Note: Although I've delegated the event to the body tag in this case
    // I recommend that you use the closest available parent instead
});

http://api.jquery.com/on/#direct-and-delegated-events：[1 ]

于 2012-07-11T10:52:38.650 回答
1

您可以尝试实时查询以保持更新：http ://docs.jquery.com/Plugins/livequery

于 2012-07-11T10:52:43.043 回答