0

次のような追加を使用してjQueryによって出力されたハイパーリンクがあります。

$('#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] ボタンを押した後に [編集] リンクが機能しなくなることを除いて、ほぼ完全に機能します。

また、[OK] ボタンを押す前後に生成された HTML は非常に似ています。以下をご覧ください。

[OK] をクリックする前に:

<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>

[OK] をクリックした後 (新しいコンテンツが置き換えられます):

<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

イベントハンドラーは、ページに実際に存在する要素にのみアタッチできます。要素を削除してもう一度追加すると、クリックハンドラーをアタッチしたときに存在しなかった新しい要素であり、DOMの上位にある要素に委任する必要があります。この要素は、永続的で削除されません。

live()非推奨でdelegate()あるため、jQuery1.7以降を使用する必要がon()あります。

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

   //do stuff    

});
于 2012-12-12T04:46:04.860 に答える
0

「#appenddocumentationcontent」で .remove() メソッドを呼び出すと、ページからすべての子アイテムも削除されることを理解する必要があります。新しいタグを追加すると、以前に作成したイベント ハンドラーがバインドされません。したがって、基本的には再度バインドするか、 $.live() メソッドを使用する必要があります。

于 2012-12-12T04:41:23.933 に答える
0

click動的に追加された要素では機能しませんon。代わりに使用する必要があります。

于 2012-12-12T04:41:55.463 に答える