Question

我有这个jQuery代码：

    $(".topic_form").hide();
    $("#edit_topics_link").click(function(e) {
        e.preventDefault();
        $(".topic_form").show();
        $(this).hide();
        $("<a href='#' id='done_link'>Done</a>").insertBefore(".topic_form");
    });

    $("#done_link").click(function(e) {
        e.preventDefault();
        $(this).remove();
        $(".topic_form").hide();
        $("#edit_topics_link").show();
    });

代码的前半部分执行此操作：它在页面加载时隐藏表单。然后，当您单击链接时，它会显示表单，隐藏单击的链接，并添加新链接。这样可以100％正常使用。

代码的后半部分不起作用。单击新添加的链接时，应将其删除，显示旧链接，然后重新隐藏表单。单击新添加的链接时没有任何反应。为什么是这样？我该如何解决？

Answer 1

因为在文档加载时，您附加了单击处理程序的元素不存在，所以没有附加事件。您应该可以使用live()来解决此问题：

$("#done_link").live('click', function(e) {
    e.preventDefault();
    $(this).remove();
    $(".topic_form").hide();
    $("#edit_topics_link").show();
});

.live（）方法能够通过使用事件委托来影响尚未添加到DOM的元素：绑定到祖先元素的处理程序负责在其后代上触发的事件。

您还可以在delegate()元素的祖先元素上使用#done_link：

$("#parentElementSelector').delegate('#done_link', 'click', function(e) {
    e.preventDefault();
    $(this).remove();
    $(".topic_form").hide();
    $("#edit_topics_link").show();
});

参考文献：

live()。
delegate()。

Answer 2

它不起作用的原因是当你调用脚本的第二部分时，链接还不存在。有两种方法可以解决它。将第二部分移动到第一部分。这样，当链接存在时，就会发生事件处理程序的附件：

$(".topic_form").hide();
$("#edit_topics_link").click(function(e) {
    e.preventDefault();
    $(".topic_form").show();
    $(this).hide();
    $("<a href='#' id='done_link'>Done</a>").insertBefore(".topic_form")
    .click(function(e) {
      e.preventDefault();
      $(this).remove();
      $(".topic_form").hide();
      $("#edit_topics_link").show();
    });
});

或使用live方法分配处理程序。 live方法会观看dom，只要您指定的选择器（在本例中为.topic_form）出现，它就会将事件附加到它：

$(".topic_form").hide();
$("#edit_topics_link").click(function(e) {
    e.preventDefault();
    $(".topic_form").show();
    $(this).hide();
    $("<a href='#' id='done_link'>Done</a>").insertBefore(".topic_form");
});

$("#done_link").live('click', function(e) {
    e.preventDefault();
    $(this).remove();
    $(".topic_form").hide();
    $("#edit_topics_link").show();
});

为什么这个jQuery代码不起作用？

2 个答案: