0

基本的に、ボタンで要素の編集を処理できるようにしようとしています。Editボタンをクリックすると、テキストがに変更されSave Changes、クラスが追加されて、ボタンが別のクリックイベントにバインドされ、クリックするとSave ChangesアラートSavedが表示され、テキストがに戻されるようにしたいと思いますEdit。これは一度完璧に行われます。それを続けようとすると、クラスが追加されたり、テキストが変更されたりすることはありません。

これがjsfiddleのデモです

コード：

$(function() {
$button = $('button[name="edit"]');
$button.on('click', $button, function() {
    var $that = $(this);
    $that.text('Save Changes');
    $that.addClass('js-editing');
    if ($that.hasClass('js-editing')) {
        $that.off('click').on('click', $that, function() {
            alert('Saved!');
            $that.text('Edit');
            $that.removeClass('js-editing');
        });
    }
});

}）; </ p>

4

3 に答える 3

3

これを試してくださいhttp://jsfiddle.net/bpD8B/4/

$(function() {
    $button = $('button[name="edit"]');
    $button.on('click', $button, function() {
        var $that = $(this);
        if($that.text()=='Edit'){
          $that.text('Save Changes');
          $that.addClass('js-editing');
        }
        else{
                alert('Saved!');
                $that.text('Edit');
                $that.removeClass('js-editing');
        }
    });
});
于 2012-04-16T05:10:59.193 に答える
1

off（）を呼び出した後、元のハンドラーを追加し直すことはありません。これにより、元のハンドラーが削除されます。

そうは言っても、適切なクリックハンドラーを備えた2つのボタンを用意し、hide（）とshow（）を使用してどちらを使用できるかを切り替える方が簡単な場合があります。エンドユーザーにとっては、見た目も動作もまったく同じである必要があり、コーディングする際の頭痛の種ははるかに少なくなります。

例： http： //jsfiddle.net/VgsLA/

結局、このコードはより堅牢で管理しやすいと思います。

于 2012-04-16T05:08:02.817 に答える
1

これは単なる論理的な問題です。そして、$that.off('click').on('click', $that, function() {あなたはそれ自体に委任しているのですが、それはあなたがそれを行うべき方法ではありません。

コードを使用した解決策は次のとおりです。

$(function() {

    $button = $('button[name="edit"]');
    $button.on('click', $button, function() {
        var $that = $(this);
        if ($that.hasClass('js-editing')) {
            alert('Saved!');
            $that.text('Edit');
            $that.removeClass('js-editing');        
        } else {      
            $that.text('Save Changes'); 
            $that.addClass('js-editing');
        }
    });

});​

デモ

于 2012-04-16T05:28:23.223 に答える