0

我有一个 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 按钮设置了另一个单击事件函数来关闭文本区域、删除原始值、显示新值并再次显示编辑链接：

    $('#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 按钮之前和之后生成的 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() {

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

4

4 回答 4

1

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

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

编辑：根据评论， .live() 已被弃用，取而代之的是 .on()

编辑 2：适当的授权

于 2012-12-12T04:38:19.673 回答
0

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

于 2012-12-12T04:41:23.933 回答
0

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

于 2012-12-12T04:41:55.463 回答
0

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

live()并且delegate()已弃用，您应该on()从 jQuery 1.7 及更高版本开始使用。

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

   //do stuff    

});
于 2012-12-12T04:46:04.860 回答