1

これが私がしていることです...ユーザーが何かを入力して追加アイコンをクリックするテキストボックスがあります。これにより、入力したアイテムを「content」div内のスパンに追加するjqueryコードが起動されます。生成されたコードには、ホバー時に表示される削除アイコンがあり、クリックするとスパンが消えます。これは、コードがすでに（ドキュメントの読み込み前に）ページ上にある場合に機能しますが、動的に作成されている場合は、クリック時の削除機能が機能しなくなります。

これがJSfiddleで、実際の動作を確認できます：http: //jsfiddle.net/WF32y/

これを修正するにはどうすればよいですか？新しい質問にタグを入力すると、基本的にここ（stackoverflow.com）で何が起こるかを実行したいと思います。

4

2 に答える 2

5

これを変更して、動的に追加された要素にイベント委任を使用します。

$('a.delete').on('click', function(e) {

これに：

$(document).on('click', 'a.delete', function(e) {

フィドル

.on()直接および委任されたイベントのリファレンス

documentまた、パフォーマンスに関しては、動的に追加された要素(静的ラッパー要素など)のより近い先祖にハンドラーをアタッチできます。

于 2012-10-11T22:07:23.380 に答える
1

デリゲートで簡単にできます。あなたの場合：

  $('#container').delegate('a.delete','click', function(e) {
    e.preventDefault();
    taskID = $(this).closest('.task')[0].id;
    $(this).closest('.task').fadeTo(300, 0, function() {
        $(this).animate({
            width: 0
        }, 200, function() {
            $(this).remove();
        });
    });
});

ちなみに参考までに：

// jQuery version 1.4.3+
$('#container').delegate('a.delete'...

// jQuery 1.7+
$('#container').on('click', 'a.delete', function(e) {

それはより速くそしてより適切な方法です：

$(document).on('a.delete'...

また：

$('body').delegate('a.delete'...

また：

$(document).delegate('a.delete'...
于 2012-10-11T22:10:26.670 に答える