0

ページに新しいDOM要素を挿入するイベントがあります。この新しい要素にイベントを追加するには? 私の目標は、ユーザーが入力をクリックすると、古い値が消去されることです。私はこれを試しました：

$('a').on('click', function() {
    var newel = '<input type="text" value="test" />';
    $(newel).insertAfter($('a'));

});
$('input').on('focus', function() {
    alert($(this).val());
    $(this).val('');
});​

http://jsfiddle.net/WpyUf/ 新しいイベントが要素に追加されません。なぜですか?

4

4 に答える 4

0

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

$('a').on('click', function() {
    var newel = '<input type="text" value="test" />';
    $(newel).insertAfter($('a'));
});
$(document).on('focus', 'input', function() {
    $(this).val('');
});​

フィドル

于 2012-09-03T09:50:00.500 に答える
0

あなたのコードは、jQueryバージョンをに変更することで機能しました1.7.2

これは更新されたフィドルです

于 2012-09-03T09:50:43.770 に答える
0

このようにできます。

$('a').on('click', function() {
    var newel = '<input type="text" />';
    $(newel).insertAfter($('a')).bind('click', function() {alert("me");});
;
});

http://jsfiddle.net/dadviegas/WpyUf/4/

于 2012-09-03T09:51:08.340 に答える
0 
$('a').on('click', function() {
    var newel = '<input type="text" />';
    $(newel).on("focus",function() { alert("hello")}).insertAfter($('a'));

});

デモ

于 2012-09-03T09:52:18.473 に答える