1

.html() を使用してデータを配置すると、jQuery スクリプトが新しいデータで機能しません。コードは次のようになります。

<html>
<head>
<script>
$(document).ready(function(){
    $("#newhtml").on("click", function(){
        alert("I'm the NEW one!");
    });
    $("#put_new").on("click", function(){
        $("#newdiv").html("<input type = 'button' id = 'newhtml' value = 'click on me'/>");
    });
});
</script>
</head>
<body>
<div id="newdiv"></div>
<input type="button" id="put_new" value="put new html" />
</body>
</html>

これは単純な例ですが、追加したいデータが他にもあり、新しい要素がこのようにスクリプトで動作するようにしたいと考えています。stackoverflow.com で検索しようとしましたが、該当するものが見つかりませんでした。どうもありがとう。

4

4 に答える 4

3

.on()これは、現在のステートメントを実行する時点では、要素#newhtmlが存在しないためです。

イベント バインディングを次のように変更します。

$(document).on('click', '#newhtml', function(){
    alert("I'm the NEW one!");
});

呼び出すメイン要素on()は、呼び出し時に存在している必要があります。2 番目の引数では、バインド時に存在しない可能性がある要素のセレクターを指定できます。

于 2013-04-23T14:49:37.050 に答える
3

これを使用してください:- http://jsfiddle.net/FQjUZ/

 $("#newdiv").on("click", "#newhtml", function(){
        alert("I'm the NEW one!");
    });
    $("#put_new").on("click", function(){
        $("#newdiv").html("<input type = 'button' id = 'newhtml' value = 'click on me'/>");
    });

その理由は、要素が後で DOM に追加されるこの種の機能では、バインディングだけでなく、委任されたイベント ハンドラーを使用する必要があるからです。

イベント ハンドラーは、現在選択されている要素にのみバインドされます。コードが呼び出しを行った時点でページに存在する必要があります。.on().

委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。委任されたイベント ハンドラーがアタッチされた時点で存在することが保証されている要素を選択することで、委任されたイベントを使用して、イベント ハンドラーを頻繁にアタッチおよび削除する必要がなくなります。この要素は、Model-View-Controller デザインのビューのコンテナー要素、またはイベント ハンドラーがドキュメント内のすべてのバブリング イベントを監視する場合のドキュメントなどです。document 要素は、他の HTML をロードする前にドキュメントの head で使用できるため、ドキュメントの準備が整うのを待たずに安全にイベントをアタッチできます。

于 2013-04-23T14:51:02.393 に答える
0

ノードをDOMに追加する前にイベントをアタッチするため、newHtmlのイベントは機能しません。そのため、htmlメソッドが呼び出された後にイベントを実装する必要があります。

 $(document).ready(function(){
    $("#put_new").on("click", function(){
      $("#newdiv").html("<input type = 'button' id = 'newhtml' value = 'click on me'/>");
      $("#newhtml").on("click", function(){
           alert("I'm the NEW one!");
       });
   });
});
于 2013-04-23T14:51:30.490 に答える
0

このようなことを試してください。

var f00 = "doStuff()";

$("#newdiv").html('<input type="button" id="newhtml" value="click on me" onclick="' + f00 + '"/>');

function doStuff() {
    //stuff
}
于 2013-04-23T15:07:10.537 に答える