Question

我试图在课堂上启用事件监听器，但它不起作用

DOM元素：

<button class="btn btn-warning shopping"> Shop </button>

这是Javascript事件监听器：
一旦功能完成，它就会删除.shopping，因此事件不再触发。

$('.shopping').click(function(e){
    var that = this;
    alert( $(that).attr('class')); //btn btn-warning shopping

    //Ajax request
    $.get('processShopping.php', function(data){
    if(data == "success"){
        if($(that).hasClass('shopping')){
            $(that).removeClass('shopping');
            alert( $(that).attr('class'));//btn btn-warning
        }
    }
    });
});

已删除购物类，但仍会触发操作！

Answer 1

为此您需要使用event delegation，

$('body').on('click', '.shopping', function(e){

在上面的代码中，我使用body作为示例目的，但你必须在其上使用静态最接近的元素。

Answer 2

原因

首先，为了解释为什么你仍然得到对事件的代码响应，你需要了解click()在代码运行时将事件监听器附加到元素。随着侦听器连接到$('.shopping')选择的元素而不是选择器$('.shopping')本身，元素如何随后发生变化无关紧要。

解决方案

您真正需要的是创建一个委托事件处理程序。这将在事件时间时应用选择器，在运行代码时不。

您应该将委派的事件处理程序连接到不变的祖先元素。您应该选择一个您知道将始终存在的祖先，但如果没有其他任何东西更接近所需元素，则document是最佳默认值。

$(document).on('click', '.shopping', function(e){

此将在事件时应用过滤器时起作用。删除类后，将不会调用click函数。

说明：

永远不要将body用于委派事件，因为它有与样式相关的错误（基本上0计算的正文高度会阻止鼠标事件冒泡到body）。

如果没有其他更接近/方便的话，请始终使用document作为默认值。

document还有额外的好处，即文档始终存在，事件发生在以后，所以您不需要将事件注册代码放入文档就绪处理程序中！

JQuery：clickClass（）之后单击函数仍然有效

2 个答案:

原因

解决方案

说明：