143

jQueryで動的に挿入した要素にonclickイベントをバインドしたい

しかし、バインドされた関数を実行することはありません。この例が機能しない理由と、正しく実行する方法を教えていただければ幸いです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"        
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">
        <head>
          <title>test of click binding</title>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
          <script type="text/javascript">


        jQuery(function(){
          close_link = $('<a class="" href="#">Click here to see an alert</a>');
          close_link.bind("click", function(){
            alert('hello from binded function call');
            //do stuff here...
          });
  
          $('.add_to_this').append(close_link);
        });
          </script>
        </head>
        <body>
          <h1 >Test of click binding</h1>
          <p>problem: to bind a click event to an element I append via JQuery.</p>

          <div class="add_to_this">
            <p>The link is created, then added here below:</p>
          </div>

          <div class="add_to_this">
            <p>Another is added here below:</p>
          </div>


        </body>
        </html>

編集:メソッドが挿入される2つの要素を含むように例を編集しました。その場合、alert()呼び出しは実行されません。（コメントで指摘してくれた@Daffに感謝します）

4

9 に答える 9

328

これらのメソッドはすべて非推奨です。on問題を解決するには、メソッドを使用する必要があります。

動的に追加された要素をターゲットにしたい場合は、使用する必要があります

$(document).on('click', selector-to-your-element , function() {
     //code here ....
});

これは非推奨の.live()メソッドを置き換えます。

于 2012-10-01T13:03:14.937 に答える
71

最初の問題は、複数の要素を持つ jQuery セットで append を呼び出すと、追加する要素のクローンがそれぞれに作成され、添付されたイベント オブザーバーが失われることです。

これを行う別の方法は、各要素のリンクを作成することです。

function handler() { alert('hello'); }
$('.add_to_this').append(function() {
  return $('<a>Click here</a>').click(handler);
})

別の潜在的な問題として、要素が DOM に追加される前にイベント オブザーバーがアタッチされている可能性があります。これが何を言っているのかはわかりませんが、動作は未定と見なされる可能性があると思います。より堅実なアプローチは、おそらく次のようになります。

function handler() { alert('hello'); }
$('.add_to_this').each(function() {
  var link = $('<a>Click here</a>');
  $(this).append(link);
  link.click(handler);
});
于 2009-10-07T08:33:53.400 に答える
51

ライブ方式はどうですか？

$('.add_to_this a').live('click', function() {
    alert('hello from binded function call');
});

それでも、あなたがしたことはうまくいくように見えます。かなり似ている別の投稿があります。

于 2009-10-06T13:53:07.463 に答える
23

パーティーには少し遅れましたが、jQuery イベント ハンドラーでよくある誤解を解消しようと思いました。jQuery 1.7 では.on()、非推奨の の代わりに を使用.live()して、イベント ハンドラーが割り当てられた後の任意の時点で動的に作成される要素にイベント ハンドラーを委任する必要があります。

とはいえ、構文がわずかに異なるためlive、簡単に切り替えることはできません。on

新しい方法 (例 1):

$(document).on('click', '#someting', function(){

});

非推奨の方法 (例 2):

$('#something').live(function(){

});

上記のように、違いがあります。ツイストは、セレクターを jQuery 関数自体に渡すことで、.on()実際には と同様に呼び出すことができます。.live()

例 3:

$('#something').on('click', function(){

});

ただし、$(document)例 1 のように使用しないと、動的に作成された要素に対して例 3 は機能しません。動的委任が必要ない場合は、例 3 で問題ありません。

すべてに $(document).on() を使用する必要がありますか?

それは機能しますが、動的委任が必要ない場合は、例 3 を使用する方が適切でしょう。パフォーマンスに実際の影響はありませんが、用途に最も適した方法を使用することは理にかなっています。

動的委任が必要ない場合、.click() の代わりに .on() を使用する必要がありますか?

必ずしも。以下は、例 3 の単なるショートカットです。

$('#something').click(function(){

});

上記は完全に有効であるため、動的委任が必要ない場合にどの方法を使用するかは、個人的な好みの問題です。

参考文献:

于 2013-06-13T11:48:33.570 に答える
2

このことを考慮：

jQuery(function(){
  var close_link = $('<a class="" href="#">Click here to see an alert</a>');
      $('.add_to_this').append(close_link);
      $('.add_to_this').children().each(function()
      {
        $(this).click(function() {
            alert('hello from binded function call');
            //do stuff here...
        });
      });
});

特定のすべての要素にアタッチするため、機能します。これが、リンクを DOM に追加した後、追加した要素を DOM の JQuery 要素として明示的に選択し、クリック イベントをそれにバインドする方法を見つける必要がある理由です。

おそらく最善の方法は、提案されているように、ライブ メソッドを介して特定のクラスにバインドすることです。

于 2009-10-06T13:43:19.930 に答える
1 
    function load_tpl(selected=""){
        $("#load_tpl").empty();
        for(x in ds_tpl){
            $("#load_tpl").append('<li><a id="'+ds_tpl[x]+'" href="#" >'+ds_tpl[x]+'</a></li>');
        }
        $.each($("#load_tpl a"),function(){
            $(this).on("click",function(e){
                alert(e.target.id);
            });
        });
    }
于 2017-06-06T00:19:40.837 に答える
0

私はそれが良い方法だと信じています：

$('#id').append('<a id="#subid" href="#">...</a>');
$('#subid').click( close_link );
于 2009-10-06T13:47:12.297 に答える