0

座標系にテーブルを使用し、各 td 要素に関数を使用してフィールド値を更新しています。

[ ][ ][X][ ]
[ ][X][X][X]
[X][ ][ ][ ]

空の要素をクリックすると、Rails アプリから新しい部分データを取得 (および GET 変数を送信) して、データベースで値を "X" に設定し、テーブルを再レンダリングします。これは私のレールアプリを使用しても問題なく機能しますが、一度だけです。jQuery 関数 .click() は 1 回しか実行されないようです。関数は次のようになります: ( .coffeescript で生成)

$(document).ready(function() {
  $(".field").click(function(e) {
    $.get("http://localhost/dinners?ap="+$(this).attr('id'), function(data) {
      $("#dinner_table").html(data);
    });
  });
});

これは問題なく実行され、要素をクリックすると、テーブルに新しいデータがレンダリングされますが、一度だけです! 関数で HTML を交換した後に .click() 関数を再定義すると、2 回クリック (および更新) できるようになります。

これは基本的な質問だと確信していますが、これまでの検索ではうまくいきませんでした。

4

2 に答える 2

6

イベントを委任します。これにより、ハンドラーを一度だけアタッチする必要があります。

$(".field").click(function(e) {

となります：

$("body").on('click', '.field', function(e) {

body任意の静的親コンテナーに置き換えることができます。

于 2012-11-06T20:44:51.607 に答える
5

イベント委任を使用します。

$( '#dinner_table' ).on( 'click', '.field', function () {
    /* your click handler */
});

そのため、クリック ハンドラーは共通の祖先 (この場合は TABLE 要素) にバインドされます。

于 2012-11-06T20:44:59.843 に答える