1

重複の可能性:
jquery: on vs live

たとえば、イベントリスナーをクリックに宣言する時点では、要素はまだDOMにないため、要素が動的に追加されるとユーザーのアクションによって、.live('click') メソッドがそのトリックを行います。

しかし、jQuery v1.9.0 では、ライブ メソッドはありません。ドキュメントでは、代わりに.on()を使用するようにアドバイスされていますが、この種の例では機能しません ...

これが例のフィドルです: http://jsfiddle.net/promatik/C3DLQ/。

jQuery を 1.8.3 または Migrate Plugin に設定した場合にのみ機能します。

$("#create").click(function(){
    $('body').append($('<div id="test" class="btn">click me<div>'));
});

$("#test").on("click", function(){
    alert("worked!"); 
});

実際にdelegate()やbind( ) などの他のメソッドをテストしましたが、どれも機能しませんでした。

4

3 に答える 3

3

機能しない理由はtest、javascript が最初に実行されたときに存在しなかったためです。on イベントを親要素にアタッチし、それを にフィルターすると#test、期待どおりに機能します。

$("body").on("click", "#test", function(){
    alert("worked!"); 
});

更新されたフィドル: http://jsfiddle.net/C3DLQ/4/

于 2013-01-24T02:42:28.903 に答える
2

次のように、ドキュメントに添付してセレクターを指定できます。

$(document).on("click", "#test", function(){
    alert("worked!"); 
});

最初の#testセレクタ クエリで要素が返されなかったため、イベントは関連付けられませんでした。それをdocument要素にアタッチし、使用するセレクターを指定すると、新しい要素が DOM に追加されたときに機能します。

于 2013-01-24T02:40:35.280 に答える
1

機能しない理由は、1 つの ID の複数のインスタンスを使用しているためです。複数の要素を選択する場合は、代わりにクラスを使用してください。

$('#create').click(function() {
    $('body').append($('<div class="btn test">click me<div>'));
});

また、クリックをドキュメントにバインドし、このように要素をフィルタリングする必要があります.test。

$(document).on('click', '.test', function() {
    alert('worked!'); 
});
于 2013-01-24T02:41:01.840 に答える