クリック可能なSPANを含むセルをテーブルに追加する方法

Question

jQuery 1.7xでは、いくつかの列を持つ動的に生成されたタブ内にテーブル全体を作成しています。

ダイナミックコンテンツの把握しにくいクリックイベントを除いて、すべてが素晴らしいと思われます。私はちょうど.onメソッドを使ってリスト項目に対してこれを行う方法を学びましたが、私のテーブルではうまくいかないようです。 （重要な場合、各jQueryタブは特定の年に動的に追加され、そのタブの表にはその年に開催されたすべての会議が含まれます）

何が欠けていますか？私はまた、私は、これはその場でテーブルを作成するための最良の方法であることを知りませんが、私は理解することが最も明確だったので、それに何か提案http://jsfiddle.net/KYkRZ/

<table> 
    <tr><td><span class="ClickableClass">Is Clickable</span></td><td>Regular TD</td></tr> 
</table> 
<div id='myTab'></div> 

$('.ClickableClass').on('click',function() {alert("ClickableClass click event") }); 

$('#myTab').append('<table border></table>'); 
var myTable = $('#myTab').children(); 
for(i=0;i<3;i++){ 
    var mySpan = $('<span></span>').addClass('ClickableClass').text('Should be clickable ' + i); 
    var myTD = $('<td></td>').append(mySpan); 
    var myTR = $('<tr></tr>').append(myTD); 
    $(myTable).append(myTR); 
} 

でこれを持っています終わりに感謝します。 :) .on()関数のパラメータの順序に

Answer 1

あなたは、オブジェクトにイベントハンドラを追加していない、新しいものを作成し、決してイベントを追加します新しいものへのハンドラ。これに対処するには2つの方法があります。最初はそれぞれの後にイベントハンドラを追加するだけですが、それはコードを複製します。動的コンテンツがあることがわかっている場合は、コンテナにイベントハンドラを追加し、そのセレクタにイベントにセレクタを渡すことで、特定の型の要素でクリックイベントを探すようにコンテナに指示します。

var mySpan = 
    $('<span></span>') 
     .addClass('ClickableClass') 
     .bind('click', function() { alert('it works'); }) 
     .text('Should be clickable ' + i); 

Answer 2

問題：

$('body').on('click', '.ClickableClass', function() { 
    alert("ClickableClass click event"); 
}); 

http://jsfiddle.net/KYkRZ/5/

Answer 3

$('#myTab').on('click', 'span.ClickableClass', function() {alert("ClickableClass click event") }); 
$('#myTab').append('<table border></table>'); 
var myTable = $('#myTab').children(); 
for(i=0;i<3;i++){ 
    var mySpan = $('<span></span>').addClass('ClickableClass').text('Should be clickable ' + i); 
    var myTD = $('<td></td>').append(mySpan); 
    var myTR = $('<tr></tr>').append(myTD); 
    $(myTable).append(myTR); 
} 

DEMO.

Answer 4

わずかに最適化された方法で、変数をキャッシュするだけでなく、forループ内の不要なjQueryオブジェクトを排除することもできます。私は...私はこの全体のjqueryの事を「取得」し始めているが、構文自体た後、ここで、/ときは、いつも私をトリップのようです参照

I would do it this way:

var $body = $("body"), 
    $myTab = $("#myTab").append("<table border></table>").children(); 

$body.on("click", ".ClickableClass", function() { 
    alert($(this).html().trim()); 
}); 

for(i = 0; i < 3; i++) 
{ 
    $myTab.append("<tr><td><span class=\"ClickableClass\">Should be clickable " 
       + i + "</span></td></tr>");  
} 

Answer 5

：あなたのスパンにイベントをクリックしてバインドすることができます。この場合、http://jsfiddle.net/gregjuva/Hs4Kq/

$('body').on('click', '.ClickableClass', function() { 
    alert("ClickableClass click event"); 
});