1

jQueryを使用して画像を含むテーブルを作成しています。私のjsコードは次のようになります：

$(document).ready(function() {
    var korpusArray = new Array();
    $.getJSON("file.js", function(data) {
        var korpusId;
        var korpusChooseTable = "<table id='TableKorpusGaleria'><tbody><tr>";
        $.each(data, function(i, value) {
            korpusArray.push(value.text);
            strRemove = value.filename.replace("korpus/", "");
            korpusChooseTable += '<td><p>'+value.title+'</p><p style="display:none;">'+value.id+'</p></br><img src="/korpus/thumbs/phoca_thumb_s_'+strRemove+'"></td>';
        });
        korpusChooseTable += '</tr></tbody></table>'; 
        $("#korpusChoose").html(korpusChooseTable);
        console.log(korpusArray.length);
        console.log(data.length);
    });
    // after this I wanna click on table cell and do some function but
    // it doesnt work. Can somebody tell me what I'm doing wrong?
    $("#korpusChoose #TableKorpusGaleria tbody td").click(function() {
        alert();
    });
});
4

4 に答える 4

2

動的に作成されたアイテムに委任を使用します-バインド時に要素が存在しない場合...通常はdomの準備ができています-イベントハンドラーはアタッチされません

jQuery1.7以降http://api.jquery.com/on/

$("#korpusChoose ").on('click','#TableKorpusGaleria tbody td',function(){
       alert();       
});

またはjQuery1.6からjQuery1.4.3までhttp://api.jquery.com/delegate/

$("#korpusChoose ").delegate('#TableKorpusGaleria tbody td','click',function(){
       alert();       
});

後続の観点から.live（）メソッドを書き直すのは簡単です。これらは、3つのイベント添付メソッドすべての同等の呼び出しのテンプレートです。

$（selector）.live（events、data、handler）; // jQuery 1.3+

$（document）.delegate（selector、events、data、handler）; // jQuery 1.4.3+

$（document）.on（events、selector、data、handler）; // jQuery 1.7+

もう1つの方法は、domに追加した直後に追加することです。

$("#korpusChoose").html(korpusChooseTable);

その後すぐに

$("#korpusChoose #TableKorpusGaleria tbody td").click(function(){
     alert();
});

後者は、テーブル内のすべてのtd要素にイベントハンドラーをバインドするため、効率は低下しますが、委任を使用すると、domに存在する親要素にのみバインドし、イベントが発生したときにイベントを処理します。

于 2012-09-19T13:46:59.547 に答える
1

テーブルは動的に作成されるため、 jqueryのを使用してイベント委任を使用する必要がありますon。これにより、要素が存在する前にハンドラーをアタッチできます。

$("#korpusChoose #TableKorpusGaleria tbody td").click(function(e){

代わりに

$("container").on("focus", "#korpusChoose #TableKorpusGaleria tbody td",function(e){

ここcontainerで、は動的にロードされない静的な祖先要素のセレクターです。そのようなコンテナが存在しない場合はdocument使用できますが、可能な限り回避する必要があります。

于 2012-09-19T13:47:03.600 に答える
0

テーブルは動的に生成されるため、次を使用できます。

$('#mytable').live('click', function() {
    // Click event handler action here...
});

live（）メソッドを使用してイベントハンドラーをバインドすると、AJAX呼び出しなどによって動的に作成された要素でもトリガーされます。

更新： .live（）はJQuery 1.7以降非推奨になっているため、Andrewのおかげで、イベントの委任に.on（）を使用することを検討してください。

于 2012-09-19T13:48:23.140 に答える
0

jqueryを使用する$("table").live("click",function(){ });現在および将来の現在のセレクターに一致するすべての要素にイベントハンドラーをアタッチします。Jqueryクリックは、ドキュメント内の現在の要素のクリックイベントのみをバインドします。

http://jsfiddle.net/wFcpP/3/

于 2012-09-19T13:48:54.223 に答える