1

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 );
}

また、これがその場でテーブルを作成するための最良の方法であるかどうかはわかりませんが、理解するのが最も明確だったので、そのための提案をいただければ幸いです。:)

4

5 に答える 5

1

オブジェクトにイベントハンドラーを追加してから、新しいオブジェクトを作成し、新しいオブジェクトにイベントハンドラーを追加することはありません。これに対処するには2つの方法があります。1つ目は、それぞれの後にイベントハンドラーを追加することですが、コードが重複します。動的コンテンツを使用することがわかっている場合は、イベントハンドラーをコンテナーに追加し、セレクターをイベントに渡すことで、特定のタイプの要素でクリックイベントを検索するようにコンテナーに指示することをお勧めします。

$('body').on('click', '.ClickableClass', function() {
    alert("ClickableClass click event"); 
});
于 2012-04-25T16:07:53.723 に答える
0 
$('#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 );
}

デモ。

于 2012-04-25T16:08:53.620 に答える
0

関数のパラメータの順序で問題.on()：

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

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

于 2012-04-25T16:05:55.463 に答える
0

この場合、クリック イベントをスパンにバインドできます。

var mySpan =
    $('<span></span>')
        .addClass('ClickableClass')
        .bind('click', function() { alert('it works'); })
        .text('Should be clickable ' + i);
于 2012-04-25T16:16:31.033 に答える
0

もう少し最適化された方法として、変数をキャッシュし、for ループ内の不要な jQuery オブジェクトを削除することができます。

私はこのようにします：

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>");    
}
于 2012-04-25T17:37:59.830 に答える