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元素：一个处理程序绑定到祖先元素是负责其后代触发的事件。

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

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