jQuery - Alert() being called twice when trying to edit text

Question

I am trying to make a paragraph editable. I managed to change <p> into a <text area> but the alert() (I will make the ajax call instead the alert) is being called twice: when I click on edit (wrong) and when I click on save (correct):

$(document).ready(function() {

     $('.tabs a').on("click",function(){

       var $this = $(this);
       $('.panel').hide();
       $('.tabs a.active').removeClass('active');
       $this.addClass('active').blur();
       var panel = $this.attr('href');
       $(panel).fadeIn(250);
       return false;

    });//end click

     $('.tabs li:first a').click();

   $(".eventFeedbackBottomContainer").on("click", "a.editReview", function(e){
      e.preventDefault();
      var reviewId = $(this).data('review-id');
      var myInnerHtml = document.getElementById("commentParagraph"+reviewId+"").innerHTML;

         $(this).text("Save").attr('class', 'change');
         $("#commentParagraph"+reviewId+"").replaceWith(function () {
         return '<textarea name="comments" id="comments" class="form-control review-comments"  rows="15" col="40" style="width:90%;">'+$(this).text()+'</textarea>';

      });  
   });

$(document).on('click', '.change', function (e) {
      e.preventDefault();
    // Do Ajax Call
     alert('ok');
  });
});//end document ready function 




   <div class="eventFeedbackBottomContainer">
         <div class="tabs">
            <ul>
             <li><a href="#panel1" tabindex="1" class="active">Reviews</a></li>
             <li><a href="#panel2" tabindex="2">Hotels</a></li>
            </ul>
        </div>

  <div class="rightFeedbackBottomContainer">
     <a href="/addReview/11/" id="" class="Smallbut">Add Review</a>
  </div>

  <div id="panel1" class="panel" style="display: block;">

       <div class="feedbacksContainer">
            <div class="starReviews">
                <div class="show-reviews"><a class="editReview" data-review-id="33"  href="">Edit</a>
              <div class="current-review"><div class="current-review-content">
              <p class="editable" id="commentParagraph33">Event really well organized. Nice course with 1 lap inside the Abu Dhabi F1 race track. "</p></div><div class="current-review-stars"><div class="current-review-rating"><h6>Overall</h6><img width="55px" src="/img/rating-star4.png" alt="4 stars"></div><div class="current-review-rating"><h6>Course</h6><img width="55px" src="/img/rating-star4.png" alt="4 stars"></div><div class="current-review-rating"><h6>Organizer</h6><img width="55px" src="/img/rating-star4.png" alt="4 stars"></div><div class="current-review-rating"><h6>Race Pack</h6><img width="55px" src="/img/rating-star4.png" alt="4 stars"></div><div class="current-review-rating"><h6>Location</h6><img width="55px" src="/img/rating-star3.png" alt="4 stars"></div></div><div class="current-review-author"><p>Reviewed on 31 March 2014 by <a href="/user/1033/"><strong>Mattia</strong></a><a></a></p></div><div class="current-review-disclaimer"><p>This review is the subjective opinion of a yoofit member and not of yoofit.</p></div></div><br></div>

              </div>

              </div>

           </div>


           <div id="panel2" class="panel" style="display: none;">
      <h5>we are working on this section. </h5>


           </div>

         </div>

this is the JSFiddle

Answer 1

You just need to stop the event progation and make sure that is stoped with a callback function, take a look at that fiddle .

Code there:

$(".eventFeedbackBottomContainer").on("click", "a.editReview", function(e){
      e.preventDefault();
      var reviewId = $(this).data('review-id');
      var myInnerHtml = document.getElementById("commentParagraph"+reviewId+"").innerHTML;

    $(this).text("Save").attr('class', 'change');
    e.stopPropagation();
    $("#commentParagraph"+reviewId+"").replaceWith(function () {
            return '<textarea name="comments" id="comments" class="form-control review-comments"  rows="15" col="40" style="width:90%;">'+$(this).text()+'</textarea>';
    });

    callback_function(); 

});

function callback_function(){
  $(document).on('click', '.change', function (e) {
        e.preventDefault();
      // Do Ajax Call
  alert('ok');
  });
}