Question

我有一个jQuery使用append输出的超链接：

$('#content').append('<div id="appenddocumentationcontent">'+documentation_contentvalue + " <a title='Click to Edit' id='edit_content'>[Edit]</a></div>");

生成的HTML是：

<div id="content">
  <div id="appenddocumentationcontent">The quick brown fox jumps over the lazy dog <a id="edit_content" title="Click to Edit">[Edit]</a>
  </div>
</div>

我有一个使用jQuery的点击事件，如果点击它会显示一个文本区域，如果第一次点击编辑超链接它会正常工作（请注意选择器与超链接匹配）：

    $('#content #edit_content').click(function() {  

          //Show textarea
    $('#textarea_documentation_content').show();    

      //Show OK button to close again this textbox

    $('#documentation_button_content').show();


      //Hide edit link
    $('#documentation_edit_content').hide();

      //Hide the current content div
    $('#documentation_content').hide();     


});

最后，我有另一个单击事件函数，用于确定按钮关闭文本区域，删除原始值，显示新值并再次显示编辑链接：

    $('#OK_button').click(function() {  
            //remove original content
    $('#appenddocumentationcontent').remove();

            //hide the text area
            $('#textarea_documentation_content').hide();


            //hide the OK button
            $('#documentation_button_content').hide();

            //show again the content div
    $('#documentation_content').show();


           //Show again the edit link
    $('#documentation_edit_content').show();

            //retrieve the new text area value
    var documentation_contentvaluex= $('textarea#textareainput_documentation_content').val();

            //finally append this new value
    $('#content').append('<div id="appenddocumentationcontent">'+documentation_contentvaluex + " <a title='Click to Edit' id='edit_content'>[Edit]</a></div>");

});

它完美地工作，除了主要问题是按下OK按钮后编辑链接不再工作。

在按下OK按钮之前和之后生成的HTML也非常相似，请看下面的内容：

点击之前确定：

<div id="content">
  <div id="appenddocumentationcontent">The quick brown fox jumps over the lazy dog <a id="edit_content" title="Click to Edit">[Edit]</a>
  </div> 
</div>

点击确定后（更换新内容）：

<div id="content" style="display: block;">
  <div id="appenddocumentationcontent">This is the new content! <a id="edit_content" title="Click to Edit">[Edit]</a>
 </div>
</div>

如您所见，选择器根本没有改变，它应该在点击功能中使用这些选择器再次触发编辑链接：

$('#content #edit_content').click(function() {

我错过了什么吗？非常感谢你的提示。

Answer 1

如果要添加和删除元素，请改用.on（）。

$('#content').on('click', '#edit_content', function() { ... });

编辑：根据评论，.live（）已被弃用，转而使用.on（）

编辑2：正确授权

Answer 2

您需要了解当您在“#appenddocumentationcontent”上调用.remove（）方法时，您还要从页面中删除所有子项。添加新标记时，它没有绑定到之前创建的事件处理程序。所以基本上你需要再次绑定或使用$ .live（）方法。

Answer 3

click不适用于动态添加的元素，您应该使用on代替。

Answer 4

您只能将事件处理程序附加到页面上实际存在的元素。当你删除元素并再次附加它时，这是一个在附加click处理程序时不存在的新元素，并且需要将它委托给持久存在且不会被删除的DOM上方的元素：

不推荐使用

live()和delegate()，您应该使用jQuery 1.7及更高版本中的on()。

$('#content').on('click', '#edit_content', function() {

   //do stuff    

});

重新追加后，jQuery触发的编辑链接无法正常工作

4 个答案: