5

ページにいくつかの html が動的に追加されているページがあります。

これは、作成される html と javascript です。

<div>
    <script type="text/javascript" language="javascript">
        $('#btn').click(function() {
            alert("Hello");
        });
    </script>

    <a id="btn">Button</a>
</div>

Firebug コンソールを見ると、次のようなエラーが表示されます。

TypeError: $("#btn") は null です

jQuery は最初にページにロードされています。

ここで何が間違っていますか？

4

6 に答える 6

9

jQueryが実行された時点でDOMに存在する要素にon()（またはメソッド内で定義されたイベントを）バインドする必要があります。通常、これはオンまたは同様です。on()$(document).ready()

$('#btn')ページの読み込み時に DOM に存在する、要素が追加される最も近い要素にバインドします。

を（たとえば）にロード$('#btn')していると仮定すると、次のようになります。#container div

<div id="container">
    <div>
        <a href="#" id="btn">Button text</a>
    </div>
</div>

次に使用します。

$('#container').on('click', '#btn', function(){
    alert('Button clicked!');
});
于 2012-09-07T21:24:24.657 に答える
3

.onイベントをボタンに接続するために使用します。このSOの回答を確認してください：

動的に作成された要素のイベントバインディング?

$(document).ready(function() {
    $('body').on('click', '#btn', function() {
        alert("Hello");
    });
})

編集:ドキュメントの準備ができたコードを追加しました。必ずそれを実行してください。

修理済み。

于 2012-09-07T21:25:22.097 に答える
1

クリックイベントを動的に追加されたノードにバインドする .on here を探しています。

$("#parent_container").on("click", "#btn", function () {
    alert("hello")
})

ドキュメント: http://api.jquery.com/on/

于 2012-09-07T21:24:21.243 に答える
0

.live()jQueryの機能を使用する

于 2012-09-08T01:06:47.423 に答える
0

試す

<div>
     <a id="btn">Button</a>
</div>
 <script>

    $('#btn').on('click', function() {
        alert("Hello");
    });

</script>
于 2012-09-07T21:24:46.520 に答える
0

コードの問題は、ボタンが作成される前にイベントをボタンにアタッチしていることです。

正しいバージョンは次のとおりです。

  <div>
       <a id="btn">Button</a>
       <script type="text/javascript" language="javascript">
           $('#btn').click(function() {
              alert("Hello");
           });
       </script>            
  </div>

これでうまくいくはずです。

于 2012-09-07T21:25:28.587 に答える