1

「a」要素にクリックイベントがあります：

<a href="#" class="edit-row">Edit</a>

この要素にクリック イベントを追加しました。

$(document).on('click', "a.edit-row", editRow);

編集ボタンをクリックすると、editRow 関数が呼び出されます。この関数は Edit < a > 要素を変更します。

$(this).find("a.edit-row").html("Save").removeClass("edit-row").addClass("save-row").off('click').click(saveRow);

これはすべてうまくいきます。

「保存」をクリックすると、saveRow 関数が呼び出されます。この関数内で、「編集」ボタンに戻りたいと思います。

これは、これを達成するために使用したバージョンの 1 つです。

$(this).off('click').html("Edit").toggleClass("save-row").toggleClass("edit-row");

私は他のこともいくつか試しました。しかし、何が起こるか、保存をクリックすると編集に変わりますが、すぐに再び保存に戻ります。

$(document) 部分のクリックイベントがトリガーされているようです。ただし、クラスを変更するときにこのクリックイベントがトリガーされるのを無効にしたり、防止したりすることはできないようです。toggleClass() ではなく、もう一度クリックしたときに起動する必要があります。

ここで何が欠けていますか？

4

3 に答える 3

2

あなたは物事を複雑にしすぎていると思います。edit-row必要なのは、 forとfor の 2 つの個別のハンドラーだけのようですsave-row。クリック ハンドラーをまったく削除する必要はありません。

$(document).on('click','a.edit-row', function() {
 $(this).toggleClass('edit-row save-row').html('Save');
 //do other stuff in your editRow function
});

$(document).on('click','a.save-row', function() {
 $(this).toggleClass('edit-row save-row').html('Edit'); 
 //do other stuff in your saveRow function
});

ここのフィドルで例を見ることができます。http://jsfiddle.net/cc9he/

于 2013-07-26T15:55:52.117 に答える
0

あなたの問題は、クリックハンドラーを にアタッチしてから、クリックされたタグではないdocumentから削除しようとしていることです。私が理解していることから、からではなく、でクリックハンドラーを削除する必要があります。しかし、私は本当にあなたがこれをやり過ぎていると思います.2つのハンドラーを持ってクラスを交換するのは簡単かもしれません.thisdocumentadocumentthis

于 2013-07-26T15:55:57.813 に答える
0

クラス名を使用して委任を使用して、呼び出す関数を特定できます。

$(function() {
    $(document).on('click', "a.edit-row", editRow);
    $(document).on('click', "a.save-row", saveRow);
});

function editRow() {
     $(this).html("Save").removeClass("edit-row").addClass("save-row");
}


function saveRow() {
    $(this).html("Edit").removeClass("save-row").addClass("edit-row");
}

http://jsfiddle.net/Z96pp/

于 2013-07-26T15:56:36.063 に答える