1つのボタンで2つのイベントを切り替える

Question

コメントをインラインで編集できるようにするためにいくつかの機能を追加しようとしています。これまでのところはかなり近いですが、私は2番目のイベントを引き起こそうとする問題を経験しています。それは初めて動作しますが、その後は失敗します。

$(function() { 
var $editBtn = $('.js-edit-comment-btn'); 
var clicked = false; 

$editBtn.on('click', $editBtn, function() { 
    clicked = true; 
    var $that = $(this); 
    var $form = $that.closest('.js-edit-comment'); 
    var $commentTextBody = $that.closest('div').find('.js-comment-body'); 
    var commentText = $commentTextBody.text(); 
    var $editableText = $('<textarea />'); 

    if ($that.text() === 'Save Edits') { 
     $that.text('Saving...').attr('disabled', true); 
    } else { 
     $that.text('Save Edits').attr('alt', 'Save your edits'); 
    } 

    // Replace div with textarea, and populate it with the comment text 
    var makeDivTextarea = function($editableText, commentText, $commentTextBody) { 
     $editableText.val(commentText); 
     $commentTextBody.replaceWith($editableText); 
     $editableText.addClass('gray_textarea js-edited-comment').width('100%').css('padding', '4px').focus(); 
    }; 
    makeDivTextarea($editableText, commentText, $commentTextBody); 


    var saveEdits = function($that, $editableText) { 
     $that.on('click', $that, function() { 
      if (clicked) { 
       var comment = $that.closest('div').find('.js-edited-comment').val(); 

       $editableText.wrap('<div class="js-comment-body" />').replaceWith(comment); 
       $that.text('Edit').attr('alt', 'Edit Your Comment').attr('disabled', false); 
       $('#output').append('saved'); 
       clicked = false; 
       return false; 
      } 
     }); 
    }; 
    saveEdits($that, $editableText); 
    return false; 
}); 

}）;あなたの作業のためのソリューション

jsfiddle demo here

Answer 1

Hiya デモ：http://jsfiddle.net/8P6uz/

clicked=trueは:)問題でした）私は別の小さなものを整流しています。 i.e. $('#output') is set to empty before appending another saved hence text **saved** will only appear once.

小さなノート：私はボタンの使用同上を提案したり、多くの編集ボタンがある場合、あなたはすでに私は数えるthisを使用してみてください可能性がある場合。私はこれをもっときれいに書くことができるかどうかを見ていきますが、それはいつか後のishだが、これはあなたの問題を解決するはずです。 ：） 楽しい！まだ同じ問題だ

のjQueryコード

$(function() { 
    var $editBtn = $('.js-edit-comment-btn'); 
    var clicked = false; 

    $editBtn.on('click', $editBtn, function() { 
     clicked = true; 
     var $that = $(this); 
     var $form = $that.closest('.js-edit-comment'); 
     var $commentTextBody = $that.closest('div').find('.js-comment-body'); 
     var commentText = $commentTextBody.text(); 
     var $editableText = $('<textarea />'); 

     if ($that.text() === 'Save Edits') { 
      $that.text('Saving...').attr('disabled', true); 
     } else { 
      $that.text('Save Edits').attr('alt', 'Save your edits'); 
     } 

     // Replace div with textarea, and populate it with the comment text 
     var makeDivTextarea = function($editableText, commentText, $commentTextBody) { 
      $editableText.val(commentText); 
      $commentTextBody.replaceWith($editableText); 
      $editableText.addClass('gray_textarea js-edited-comment').width('100%').css('padding', '4px').focus(); 
     }; 
     makeDivTextarea($editableText, commentText, $commentTextBody); 


     var saveEdits = function($that, $editableText) { 
      $that.on('click', $that, function() { 
       if (clicked) { 
        var comment = $that.closest('div').find('.js-edited-comment').val(); 

        $editableText.wrap('<div class="js-comment-body" />').replaceWith(comment); 
        $that.text('Edit').attr('alt', 'Edit Your Comment').attr('disabled', false); 
        $('#output').text(""); 
        $('#output').append('saved'); 
        clicked = true; 
        return false; 
       } 
      }); 
     }; 
     saveEdits($that, $editableText); 
     return false; 
    }); 
});​