jquery - 如何从 jQuery 生成的链接（通过 append() ）运行 jQuery 函数？

Question

我在使用 jQuery 时遇到了一点麻烦，希望你能帮助我。我认为这很容易，但我真的不知道:-(

问题是，我通过 jQuery append() 函数编写了一些内容，并且在这个内容中有一个链接，如果按下它应该运行我自己的函数。

示例在这里：http: //jsfiddle.net/5ahkD/2/

$(document).ready(function () {
    $(".add").click(function () {
        $("#items").append('<div id="item">\n\
                   <a href="#" class="delete" id="delete">Delete!</a>\n\
                   Some content inside div element...\n\
                   </div>');
    });

    $(".delete").click(function () {
        $(this).hide();
    });
  });

“添加项目！” 将生成一些带有链接的内容（“删除！”），单击后该链接应消失。正如您在单独的底部链接中看到的那样，只有当此链接不是通过 append() 写入时才可以...

这几乎可以肯定是愚蠢的容易，但我找不到任何方法来完成这项工作。

Answer 1

您必须将事件处理委托给页面加载期间存在的元素。jQuery 提供的.on()方法就是这样做的。

$(document).on('click', '.delete', function(){
    $(this).hide(); // will  hide the delete
    // $(this).parent().hide(); //will hide the .item
});

Answer 2

使用实时事件处理程序。它适用于新创建/添加的元素

$("#items").on("click", ".delete", function () {
    $(this).hide();
});

如果要实际删除创建的行，请使用：

$(this).parent().remove();