4

私は私の英語を前もって謝罪します...

編集可能なテーブルのセルを作成しています。このテーブルでは、クリックされたセル (td) のクリック イベントを削除しますが、他のセルはクリック可能にします。

$("#idTable").on("click", "td", function (e) {

    var oTxtbox = $('<input type="text" value="' + $(this).text() + '"/>');
    $(this).html(oTxtbox);

    // I try to remove the event 
    $(this).off(e);

    // $("#idTable").off("click", $(this) );

    // other code

});

ステートメント$(this).off(e)では、すべてのセルのイベントを削除しますが、代わり $("#idTable").off("click", $(this) )に何も削除しません。すべてのセルはクリック可能です。

手伝って頂けますか？

更新 1: これは私の例のデモです:例コード

更新 2: イベントに別の問題があります。ユーザーがテーブルの外側をクリックした場合、td でイベントを再バインド/再アタッチしたいと考えています。これは完全なコードへのリンクです: NO RE-BIND EVENT

私は今何を間違っていますか？

4

3 に答える 3

6

編集

私はあなたが解決策を見つけたのを見ました、甘い:)。

完全を期すために、イベントを完全にバインド解除する方法を最終的に見つけたので、答えを残します。

動的バインディングを使用しているため、個々の要素のバインド解除は、イベントがバインド元の静的要素に常にバブリングするため、非常に複雑です。

他の回答に見られるように、クリック イベントを新しいクリック イベントで上書きし、伝播を停止できます。

ただし、それでも、バブルアップしない場合でも、クリックすると常に実行されるイベントが添付された要素が残ります。

以下の例では、イベントが完全にバインド解除されているため、イベントが完全にバインド解除されているため、残り物がなく、伝播を停止する必要がありません。

$(document).one('click', 'div', function(e) {
    $(this).parent().find("div").one('click.NewClick', function() {
        $('#result').append(this.id + " was clicked<br />");
    });

    $(this).click();
});​

デモ- 動的にバインドされた個々の要素のバインドを解除

上記のデモでは、イベントの自動バインド解除を確実にするために、one()を使用しています。

one()ロジックには外側が必要ですone()。バインドされていないイベントをクリックしたいので、内側は要件です。

clickを使用して、通常どおり動的セレクター「div」で初期イベントをバインドしていone()ます。

ただし、イベント内にあるものは、divのいずれかがクリックされた後、要素が存在するため、今回はセレクターを使用clickして、クリックイベントを要素に再バインドしています。また、名前空間を使用して、外側のバインドを解除しても新しいバインドが削除されないようにしています。one()static'click.namespace'one()

これで、すべての div が で適切one()にバインドされました。つまり、クリックすると、div は自動的に完全にバインド解除されます。

ユーザーが最初のクリック後に 2 回クリックする必要がないように、最初のイベントをトリガーした要素のクリック イベント ( ) を自動的にトリガーし、ユーザーにとって$(this).click()シームレスにします。

あなたのコードは、以下のようなコードでこれを使用できるはずです:

$("#idTable").one("click", "td", function(e) {
    $(this).parent().find("td").one('click.NewClick', function() {
        var oTxtbox = $('<input type="text" value="' + $(this).text() + '"/>');
        $(this).html(oTxtbox);

        // other code
    });

    $(this).click();
});​

on()の代わりにone()を使用していることに注意してください。 もちろん、要素がクリックされた後にイベントのバインドを解除したいので、内部バインディングは必要なものにすることができます。
one()

于 2012-08-21T19:00:12.520 に答える
2

私はそれがあなたが考えているものではないと思い$(this)ます。<td>これは、イベントがキャッチされる場所ではないマッチングです ($("#idTable")バブルアップ時にキャッチされます。

ハンドラー内の行を次の行に置き換えると、.off必要なことが行われます。

$this.on('click', function(e) {e.stopPropagation();} );
于 2012-08-21T20:04:33.370 に答える
1

使ってみましたunbindか？

$("#idTable").on("click", "td", function (e) {
  var item=$(this);

  var oTxtbox = $('<input type="text" value="' + item.text() + '"/>');
  item.html(oTxtbox);

  item.unbind("click")

});

http://api.jquery.com/unbind/

以前にアタッチされたイベント ハンドラーを要素から削除します。

編集:ハンドラーをそれ自体から削除する必要がある場合は、このアプローチを実行する必要があります。

したがって、コードは

$("#idTable").on("click", "td", function (e) {
  var item=$(this);

  var oTxtbox = $('<input type="text" value="' + item.text() + '"/>');
  item.html(oTxtbox);

  item.unbind(e)

});

この場合、ハンドラーはパラメーターを受け取る必要があります。これにより、イベント オブジェクトをキャプチャーし、それを使用して 3 回目のクリック後にハンドラーのバインドを解除できます。イベント オブジェクトには、削除するハンドラーを .unbind() が知るために必要なコンテキストが含まれています。

作業サンプル: http://jsfiddle.net/tRNhJ/24/

于 2012-08-21T19:00:30.847 に答える