2

を使用して要素を作成しJquery、クラスを指定し.bookます。

jQuery('<div/>', {
    name: "my name",
    class: 'book',
    text: 'Bookmark',
}).appendTo('body');

次に、そのクラスがクリックされたときに何かをしたいので、当然、すばやく簡単に書きました。

$('.book').click(function(){
    alert('I have been clicked');
});

それはうまくいく

機能しないのは、クリック時にそれらの要素を追加する場合です。したがって、以下は機能しません。

var bms = 0;
$('button').click(function(){
    bms += 1;
    jQuery('<div/>', {
        name: bms,
        class: 'book',
        text: 'Bookmark ' + bms
    }).appendTo('body');
});
$('.book').click(function(){
    alert('I have been clicked');
});

なぜこれが起こるのですか?どうすれば修正できますか?

ジャスフィドル

別物：

また、ボディにクラスを含む div が既にある場合.book、クリック イベントはその div で機能しますが、追加された s は機能しませんdiv。ここにそれを示す別のjsfiddleがあります

4

3 に答える 3

1

これらは直接バインディングであり、のような動的に追加された要素では機能しません.book。

.on()次のように、動的に追加された要素にイベントをバインドするために使用できます。

$('body').on('click', '.book' ,function(){
    alert('I have been clicked');
});

body が最も近い静的要素になります。これらのタイプのバインドは、委任されたイベントと呼ばれます。

フィドル: http://jsfiddle.net/3MpcG/2/

または、要素の作成時に直接イベントを要素にバインドできます。

.appendTo('body').click(function(){
    alert('I have been clicked');
});

フィドル: http://jsfiddle.net/3MpcG/3/

どちらにも長所と短所があり、jQuery .on() ドキュメントページで読むことができます。

于 2013-07-24T20:14:01.697 に答える