Question

我知道必须以稍微不同的方式询问，但对于我的具体代码，我无法找出问题的原因：我有一个按钮需要充当开关，在＆＃34;添加＆＃34;和＆＃34;删除＆＃34;，如果删除成功，我用＆＃34;添加＆＃34;如果添加成功，我将其替换为＆＃34;删除＆＃34;，添加一个新的（唯一）ID。问题是，在我将Remove替换为Add后，当我再次点击它时没有任何反应，就像它不存在一样（尽管它在inspect元素中存在）。

           $(document).ready(function () {
            $(".add").on("click", function () {
                var id = $(this).attr('id');
                var this_button = $(this);
                $.post("add.php", {user_id: 42, add_id: add_id}) // these ids are just examples for my testings
                        .done(function (data) {
                            var arr = JSON.parse(data);
                            var rows = parseInt(arr.num_rows);
                            if (rows > 0) {
                                alert("Exists");
                            } else {
                                alert("CREATED");
                                $(this_button).replaceWith("<button id =" + 220 + " class = \"button remove\">Remove</button>");
                            }



                  });
            });

            $(".remove").on("click", function () {
                var id = $(this).attr('id');
                var this_button = $(this);
                $.post("remove.php", {user_id: 42, removal_id: removal_id}) // these ids are just examples for my testings
                        .done(function (data) {
                            var arr = JSON.parse(data);
                            var rows = parseInt(arr.num_rows);
                            if (rows > 0) {
                                alert("DELETED");
                            } else {
                                 $(this_button).replaceWith("<button id =" + 225 + " class = \"button add\">Add</button>"); //this id is also for testing
                            }                       

                  });
            });
        });

Answer 1

要处理动态添加/删除元素，请不要将事件处理程序直接绑定到它们：

$(".add").on("click", function () { //...
$(".remove").on("click", function () { //...

使用event delegation instead：

$(document).on("click", ".add", function () {
$(document).on("click", ".remove", function () {

Answer 2

它是因为jQuery在加载时定位DOM - 意味着任何新的东西都不是范围的一部分。但不要害怕，你可以这样定位：

$(document).on('click', '#my-dynamic-element-id', function()
{
    //code to run
});

这会在单击文档时激活，但仅适用于具有匹配id / class

的元素

使ajax在新创建的元素上工作而不刷新

2 个答案: