-1

テーブル行を動的に追加するボタン (実際には複数のボタン) があります。ボタンをクリックするたびに、テーブル行の特定の要素を表示/非表示にする必要があります。

いずれかのボタンが初めてクリックされると、最初の行がテーブルに追加されます。どのボタンがクリックされたかを判断するために、次を使用しています。

        j$('[id$=btnContact]').click(function(){
            console.log('contact button was clicked');
            var dataRows = j$('tr.dataRow');
            console.log(dataRows);
        });

問題は、最初の行が作成されているため、最初のクリックで dataRows オブジェクトが空になることです。行が作成されたときに dataRows オブジェクトにアクセスする方法はありますか?

コールバック関数は必要ですか?

dataRows オブジェクトは空であるため、その行の要素を表示/非表示にすることはできません。

助けてくれてありがとう。

4

2 に答える 2

0

行を動的に追加する場合は、イベントを別の方法でバインドする必要があります。たとえば、次のような場合:

マークアップ:

<table id="tbl">
    <tr>
        <td>
            <input type="button" class="btnAddRow" value="Add Row" />
        </td>
    </tr>
</table>

jQuery :

$(".btnAddRow").click(function(){
    var row = $(this).parent().parent().clone();
    $("#tbl").append(row);
});

jsFiddle : http://jsfiddle.net/hescano/aU4DQ/

最初のボタンでのみ機能します。以下は、DOM に動的に追加されたすべてのボタンに対して機能するかどうかに関係なく機能します。

$(document).on("click", ".btnAddRow", function(){
    var row = $(this).parent().parent().clone();
    $("#tbl").append(row);
});

jsFiddle : http://jsfiddle.net/hescano/aU4DQ/1/

後者はイベント デリゲートです。詳細については、http: //api.jquery.com/on/を参照してください。

于 2013-09-09T21:33:05.357 に答える
0

それを行う最も簡単な方法はそうです。

 var row = $(this).closest('tr');
于 2013-09-09T21:38:48.323 に答える