1

ASP.NET Webページに、データベースクエリの結果を示すテーブルがあります。同じページに、データベースに行を追加し、テーブルの最後に行を表示するフォームがあります。jQuery ajaxを使用してレコードをデータベースに挿入し、成功した場合は、<tr> <td> ... </td> </tr>要素を作成し、jQueryを使用してこの要素をテーブルに追加しました。これは正常に機能します。次に、テーブルの行をクリック可能にします。使ってみました $('#table-name tr').click(function () { alert ("hello"); });

フォームを使用して追加した行では、クリック機能が機能しません。回避策はありますか？すべての行をクリック可能にするにはどうすればよいですか？

4

3 に答える 3

4

$('#table-name tr')<tr>そのセレクターを呼び出したときに存在する要素のみを返します。新しい行を動的に追加する場合、それらは考慮されません。

jQuery には、動的に生成された要素を処理するための特別な構文があります。

$('#table-name').on('click', 'tr', function() {
    alert('Hello');
});
于 2012-11-19T00:49:56.167 に答える
1

これらの要素に対してクリック イベントが機能しない理由は、要素が DOM に存在する前に、イベント ハンドラーが 1 回だけ発行されたためです。

今後追加される要素に対してもクリック イベントが存在するようにするには、 を使用する必要がありますon。これにより、動的に追加される要素にハンドラーを割り当てることができます。'tr'将来の要素のイベントを処理するデリゲート関数を作成するを必ず含めてください。

$('#table-name tr').on('click', 'tr', function () { alert ("hello"); });

もう 1 つのオプションは、ページに要素を動的に追加する前に要素にクリック イベントを割り当てることです。

success: function(results){
 var newRow = document.createElement("tr");
 //manipulate newRow with results
 $(newRow).click(function(){ alert("hello") });
 //append newRow
}
于 2012-11-19T00:48:54.803 に答える
1

クリックの代わりに jquery on を使用します。問題は、クリック イベントがページの読み込み時にのみ関連付けられることです。

$('#table-name').on('click', 'tr', function() {alert('hello');});

メソッドの Jquery は、イベントが子要素から伝播するのを待ちます。

于 2012-11-19T00:51:25.540 に答える