CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Dot Batch
Dot Batch

Reputation: 608

Onclick function triggering multiple times

I am having an issue when saving inside of the add-comment modal. When I click on "save" inside of the modal it is triggers depending on how many times I have previously opened that modal.

The form I am working with is dynamic so there could be 1 to many comments to be added. I only want to use one modal to insert comments in a hidden field (not shown)

I am very confused to why when i click on the

TEST CASE

Launch Page

Open the comment modal using the comment icon

Click Save

Repeat open and saving the comment modal multiple times.

Look inside of console to see

"In Save Comment: " + i

Where i equals the number of times it is in that function.

HTML

<form id="requestForm">
  <button type="button" class="btn btn-default" data-toggle="modal" data-target="#detailsModal"><span class="glyphicon glyphicon-share" aria-hidden="true"></span></button>
  <button type="button" class="btn btn-default" data-add-comment><span class="glyphicon glyphicon-comment" aria-hidden="true"></span></button>
</form>

<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="detailsModalLabel">User Details</h4>
      </div>
      <div class="modal-body">
        <table class="table table-bordered">
          <tbody>
            <tr>
              <td class="col-sm-3"><strong>Name</strong></td>
              <td class="col-sm-4" id="info-name"></td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!-- End Details Modal -->
<!-- Comments Modal -->
<div class="modal fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="commentModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="commentModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <textarea id="modalComTxt" class="form-control" rows="4" maxlength="512"></textarea>
        <p>Characters left: <span id="txtAreaCount">512</span></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button id="save-comment" type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
      </div>
    </div>
  </div>
</div>

JAVASCRIPT

$("#requestForm").on('click', '[data-add-comment]', function() {
  var curComBtn = $(this);
  var curComment = curComBtn.prev().val();
  var modalTxt = $('#modalComTxt');
  var commentModal = $('#commentModal');

  modalTxt.val(curComment); //set the modal value with existing comment
  var i = 1;
  $('#txtAreaCount').text((512 - modalTxt.val().length)); //change text count in modal

  commentModal.modal('toggle');

  //Function when clicking save in modal

  $('#save-comment').click(function() {

    console.log("In Save Comment: " + i)
    i++
    console.dir(curComBtn.prev());
    curComBtn.prev().val(modalTxt.val());
  });

});

Upvotes: 1

Views: 2915

Answers (2)

Nikolay Ermakov
Nikolay Ermakov

Reputation: 5061

Move the code below outside the $("#requestForm").on('click', function(){...} handler. What is happening, is that you bind an additional handler to save-comment button click event every time the [data-add-comment] button of the form gets clicked. 

$('#save-comment').click(function() {

    var curComBtn = $('#requestForm').find('[data-target="#detailsModal"]');
    curComBtn.val( $('#modalComTxt').val() );

});

Upvotes: 1

Luuuud
Luuuud

Reputation: 4439

Every time someone clicks #requestForm you bind the click eventlistener to #save-comment. So after opening the modal for a second time there will be two click eventlisteners binded to #save-comment.

Since #save-comment isn't added dynamically, you can bind the click event outside of the #requestForm click handler:

$('#requestform').click(function(){
  // do stuff
});

$('#save-comment').click(function(){
  // do other stuff
});

Upvotes: 0

Related Questions