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

Question

I have this jQuery code:

    $(".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();
    });

The first half of the code does this: it hides a form when the page loads. Then when you click a link, it shows the form, hides the clicked link, and adds a new link. This works 100% fine.

The 2nd half of the code doesn't work. When you click the newly added link, it should remove it, show the old link, and re-hide the form. Nothing happens when I click the newly added link. Why is this? How can I fix it?

Answer 1

Because the element to which you're attaching the click-handler to doesn't exist at the time of the document's loading, there are no events attached. You should be able to use live() to fix this:

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

The .live() method is able to affect elements that have not yet been added to the DOM through the use of event delegation: a handler bound to an ancestor element is responsible for events that are triggered on its descendants.

You could also use delegate() on the ancestor element of the #done_link element:

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

References:

• live() .
• delegate() .

Answer 2

The reason it doesn't work is that when you call the second part of the script the link doesn't exist yet. There are 2 ways to solve it. Either move the second part into the first part. That way the attachment of the event handler happens when the link exists:

$(".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();
    });
});

Or use the live method to assign the handler. The live method will watch the dom and whenever something with the selector you specified (in this case .topic_form ) appears it will attach the event to it:

$(".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();
});