0

タグを動的に作成しています。次に、クリックイベントをそれらに添付しようとしています。しかし、それらのイベントは発生していません。

これが私のコードです：

$(function() {
    onUploadReady();
});

var onUploadReady = function() {
    $('a[name=add]').on('click', function(event){
        event.stopPropagation();
        $('table#multiUpload').append('<tr><td style=\"text-align: center;\"><input type=\"file\" name=\"file\"/></td><td><a href="#" name="remove">Remove</a></td></tr>');
        return false;
    });

    $('a[name=remove]').on('click', function(event){
       event.stopPropagation();
       $(this).parents('tr').eq(0).remove(); 
       return false;
    });
}

$('a[name=remove]').live('click', function(event)の代わりに実行すると$('a[name=remove]').on('click', function(event)、イベントが発生します。liveの使用は推奨されていないことをどこかで読んだので、 を使用する必要がありますon。また、 を使用すると、イベントの伝播またはバブリングが発生する可能性がありますlive。では、どうすれば問題を解決できますか？

jsFiddle .

4

2 に答える 2

3

次のようにします。

$("parent_selector").on('click', 'a[name=remove]', function(e){
   //do something
})

parent_selectorが不明な場合は、document代わりに使用してください。

あなたの例では、次のように書くことができます：

$("table#multiUpload").on('click', 'a[name=remove]', function(e){
   //do something
})

使用している構文はbind. 動的に追加される要素については、上記の構文を使用する必要があります。ここでは、新しく追加された要素ではなく、既に存在する親にハンドラーをアタッチします。したがって、将来追加されるすべての要素で機能します。

于 2013-01-10T06:44:55.727 に答える
2

使用する：

$(document).on('click', 'a[name=remove]', function(e){
...
});
于 2013-01-10T06:47:17.320 に答える