0

jqueryによって生成されたテーブル行があり、それらはオンザフライで生成されるため、.liveメソッドで任意のセレクターを使用してイベントをバインドします。しかし、イベントをバインドした後、さらに行を追加したいので、このような .after メソッドを使用していました。

$("#addItem").live("click", function (e, index) {    
    $('#myTable  tbody > tr:last').after('<tr><td>' + Contenet + '</td></tr'>);
});

問題は、after メソッドが JQuery 自体によって生成されたテーブル行を認識していないように見えることですが、純粋な html 行でテストすると問題なく動作します。SOの後または回避策の代わりに使用できるライブのような方法があるかどうか知りたいですか?

4

3 に答える 3

1

livejQuery 1.7 で廃止され、jQuery 1.9 で削除されました。

jQuery 1.7 以降を使用している場合は、.on代わりに使用する必要があります。

jQuery のドキュメントからのスニペット:

イベント ハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが .on() を呼び出す時点でページに存在している必要があります。 要素が存在し、選択できることを確認するには、ページの HTML マークアップにある要素のドキュメント対応ハンドラー内でイベント バインディングを実行します。新しい HTML がページに挿入されている場合は、要素を選択し、新しい HTML がページに配置された後にイベント ハンドラーを添付します。または、次に説明するように、委任されたイベントを使用してイベント ハンドラーをアタッチします。

委任イベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。委任されたイベント ハンドラーがアタッチされた時点で存在することが保証されている要素を選択することで、委任されたイベントを使用して、イベント ハンドラーを頻繁にアタッチおよび削除する必要がなくなります。この要素は、Model-View-Controller デザインのビューのコンテナー要素、またはイベント ハンドラーがドキュメント内のすべてのバブリング イベントを監視する必要がある場合はドキュメントのコンテナー要素である可能性があります。document 要素は、他の HTML をロードする前にドキュメントの head で使用できるため、ドキュメントの準備が整うのを待たずに安全にイベントをアタッチできます。

まだ作成されていない子孫要素のイベントを処理できることに加えて、委譲イベントのもう 1 つの利点は、多くの要素を監視する必要がある場合のオーバーヘッドを大幅に削減できることです。tbody に 1,000 行を含むデータ テーブルで、この例では、ハンドラを 1,000 要素にアタッチします。

$("#dataTable tbody tr").on("click", function(event){
alert($(this).text()); });

委譲イベント アプローチでは、イベント ハンドラーを 1 つの要素 (tbody) のみにアタッチし、イベントは 1 レベル (クリックされた tr から tbody まで) バブルアップするだけで済みます。

$("#dataTable tbody").on("click", "tr", function(event){
alert($(this).text()); });

注: 委任されたイベントは SVG では機能しません。

にバインドされたイベントを削除するには、 `.off()'.on()を参照してください。

于 2013-08-26T11:44:51.623 に答える
0

TBODY で追加を使用してみてください。常に最後の行としてコードが挿入されます。

$('#myTable  tbody').append('<tr><td>' + Content + '</td></tr'>);

行にメソッドをバインドする必要がある場合は、デリゲート イベントを使用できます。

このような：

function Method1(oRow)
{
    console.log(oRow);
}
$('#myTable  tbody').on('click','tr',function(){
    Method1(this);
});

これは、クリックを検出するための永続的な参照として tbody を設定したため、tbody 内のすべての行で機能します。

于 2013-08-26T11:37:48.403 に答える
0

これがあなたの望むものかどうかわかりません。 http://jsfiddle.net/qjbB7/

HTML: 追加

<table id="myTable">
    <tbody>
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>
    </tbody>
</table>

JS:

$("#add").click(function addRow(){
    $('#myTable  tbody > tr:last').after('<tr><td>text</td></tr>');
});
于 2013-08-26T11:42:49.277 に答える