on（）无法识别类[重复]

Question

这个问题已经在这里有了答案：

• 在动态创建的元素上进行事件绑定？ 23个答案

我面临on()的问题。 这是我的代码：

<span class="add" id="id_foo" >add this stuff</span>

$(".add").on('click', function() {
    $.post("/toto.com/add.php", { trainning: this.id }, function() {});
    $(this).html("Remove this stuff");
    $(this).removeClass("add").addClass("remove");
    //alert($(this).attr("class"));-->give the good class
});

$(".remove").on('click', function() {
    //doesn't work
    $.post("/toto.com/remove.php", { trainning: this.id }, function() {});
    $(this).html("add this stuff");
    $(this).removeClass("remove").addClass("add");
});

类remove的选择器无法识别它，而当我单击带有add类的按钮时，该类正在更改。 你知道是什么问题吗？

谢谢您的帮助！

Answer 1

在动态更改处理程序附加到的类时，需要使用委托事件处理程序。 尝试这个：

$(document).on('click', ".add", function() {
    $.post("/toto.com/add.php", { trainning: this.id });
    $(this).html("Remove this stuff").toggleClass("add remove");    
});

$(document).on('click', ".remove", function() {
    $.post("/toto.com/remove.php", { trainning: this.id });
    $(this).html("add this stuff").toggleClass("remove add");
});

根据此JS代码所在的script标签的位置，您可能还需要将代码包装在document.ready处理程序中。 如果它位于</body>标记之前，则可以正常工作；如果位于头部，则将其放在$(function() { /* your code here */ });