.append（）要素をクリックして登録しないでください

Question

DOMに要素を追加しようとしていますが、一度クリックするとこの要素で作業しています。しかし、私はこの関数は（HTMLの最後にある）自己呼び出し関数であり、懇願時にのみ実行されるため、関数を登録すると思っていません。

(function(){ 
    $('body').append('<span class="test">test</span>'); 
}) 

$('.test').click(function(){ 
    console.log(this); 
}); 

})(); 

クリックイベントハンドラが機能していません。

おかげでこの

Answer 1

要素が動的に追加されているため、on()を使用するか、click()イベントをチェーンすることができます。スパンが身体に追加された後、あなたが})行を削除する場合は、あなたのコード例で

//Using on() 

$('body').on('click', '.test', function(){ 
    // Bla 
}); 


//Chaining click() 

$('<span class="test">test</span>').click(function(){ 
    // Bla 
}).appendTo('body'); 

Answer 2

変更 - これまで

$('.test').click(function() 
{ 
    console.log(this); 
}); 

-

$('.test').live('click', function() 
{ 
    console.log(this); 
}); 

liveドキュメント。 jQueryの1.7のよう

EDIT

、liveは廃止されました。代わりにonを使用してください -

$('body').on('click', '.test', function() 
{ 
    console.log(this); 
}); 

onドキュメントを。

jsFiddleデモ

イベントハンドラを動的に生成されたDOM要素にバインドする場合は、live（旧式）またはonのいずれかを使用する必要があります。

Answer 3

またはあなたがこれを行うことができ、

$(function() { 
    $('body').append('<span class="test">test</span>'); 
    $('.test').click(function() { 
     console.log(this); 
    }); 
}); 

その要素がDOMに追加取得するつもりされている場合、あなたが事前にわからない場合liveまたはonは、より良い代替だろうけれども。

Answer 4

あなたは、ラッパー関数を閉じている、あなたのコードはうまく動作するはずです：他の同様

(function(){ 
    $('body').append('<span class="test">test</span>'); 
    // }) <- remove this line 

    $('.test').click(function(){ 
    console.log(this); 
    }); 
})(); 

function someFunction() { 
    console.log(this); 
} 

// work from the span and attach a direct handler 
$('<span class="test">test</span>').on('click', someFunction).appendTo('body'); 

// work from the body attaching direct handlers 
$('body') 
    .append('<span class="test">test</span>') 
    .find('.test') 
    .on('click', someFunction); 

// work from the body attaching a delegate handler 
$('body') 
    .append('<span class="test">test</span>') 
    .on('click', '.test', someFunction); 

Answer 5

あなたは関数jを閉じた。人々はすでに、あなたは同じ結果を得るために、これらのいずれかを行うことができるjQueryのチェーンになりことができるように答えていますClickハンドラが正しく動作しない理由を教えてください

$(function() { 
    $('body').append('<span class="test">test</span>'); 
    $('.test').click(function() { 
     console.log(this); 
    }); 
})();