BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] jQuery 動的に追加されたHTML要素にonclickイベントをバインドする方法 [duplicate］

2022-05-12 14:32:32

質問

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>

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

どのように解決するのですか？

最初の問題は、複数の要素を持つ jQuery セットに対して append を呼び出すと、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);
});

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します