2

ユーザーの操作とサーバーから受信したデータに基づいて動的にテーブルに追加する次の jquery があります。テーブルの各列には、いくつかの特定のクラスと、列 itemId が非表示になっているなどのいくつかのスタイル属性があります。私の動的な追加は、すでに 1 つの行がある場合は正常に機能しますが、それがない場合は、コードが最後の tr 要素をコピーするため、理解できる別のヘッダー行を追加するだけです。問題は、行がない場合に「tbody」に行を追加する方法です。

    function responseTopicAdded(data) {
        $('#dialog-modal').dialog('close');
        rowcopy = $('#datatable tr:last').clone();
        rowcopy.children().each(function() {
            switch($(this).attr('class')) {
                case 'Name':
                    $(this).html(data.Name);
                    break;
                case 'Description':
                    $(this).html(data.Description);
                    break;
                case 'Icon':
                    $(this).html('<img src='+ data.Icon +'/>');
                    break;
                case 'itemId':
                    $(this).html(data.itemId);
            }
        });
        $('#datatable tr:last').after($(rowcopy));
    }

2 番目の質問は、表のセルがダブルクリックに反応することです。ただし、新しく追加された行は応答しません (前の行があり、行が正常に追加された場合でも)。

リスナーが新しい行で機能しないのはなぜですか?

私のリスナーは次のようになります：

$(document).ready(function() {
    try {
        $("td").dblclick(function() {
            // ... my code goes here
    }catch(a){
        alert(a);
    }
}
4

2 に答える 2

2

ダブルクリック イベントが新しく追加された行で機能しない理由は、要素が存在する前にクリック イベントをバインドしているためです。このスタイルでバインドしてみてください (イベント委任は用語です)。

$("#datatable").on("dblclick", "td", function() { //do stuff });

存在しないときにa を追加するのと同様tbodyに、存在するかどうかを確認するだけです。

if ($("#datatable tbody").length) { //it exists! } else { //it doesnt exist! }
于 2013-07-05T15:44:53.553 に答える