Why I'm getting more than one on click event fire inside bootstrap modal

Question

I'm getting some problem here and need some help. I think this is easy but I just can't figure it out myself what's happening. Please see fiddle below:

Fiddle

When I only open the modal and clicks it for the first time. It works normally, but when I reopened it, there goes the problem. It fires the on click event more than once.

HTML

<button data-target="#mergeFieldsModal" data-toggle="modal" data-message-id="#message" class="btn btn-info">Open Modal</button>
<div id="result"></div>

<div id="mergeFieldsModal" class="modal fade">
  <div class="modal-dialog">
    <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>
        <h3 class="modal-title"><span class="ss-shuffle ss-icon"></span> Merge Fields</h3>
      </div>
      <div class="modal-body">
        <p>Click Add. After clicking add, open the modal again then click add again to see the problem.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" id="btnMergeField" class="btn btn-primary">Add</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

JS

// Append merge field to message textarea
$('#mergeFieldsModal').on('show.bs.modal', function(event) {
  var button = $(event.relatedTarget);
  var messageId = button.data('message-id');
  var btnMergeField = $(this).find('#btnMergeField');

  btnMergeField.on('click', function() {

    $('#result').append('<p>Fired!' + '</p>'); // Add to DOM
    $('#mergeFieldsModal').modal('hide'); // Hide Modal

  });

});

Answer 1

Since you are attaching new event every time modal dialog box is opening. You need to remove it before adding new.

 btnMergeField.off('click').on('click', function(){

Make the above change and it will work

Answer 2

It is because your code defines click event each time user opens modal. You need to define click event outside of 'show.bs.modal'. Another approach, which you need to use only if you cannot use the first one, is to off() click event, when user closes modal.

$('#mergeFieldsModal').on('show.bs.modal', function(event){
    var button = $(event.relatedTarget);
    var messageId = button.data('message-id');
    var btnMergeField = $(this).find('#btnMergeField');

    btnMergeField.on('click', function(){

      $('#result').append('<p>Fired!' + '</p>'); // Add to DOM
      $('#mergeFieldsModal').modal('hide'); // Hide Modal

    });
    $(this).on('hide.bs.modal', function() {
      btnMergeField.off('click');
    });

});

Answer 3

The javascript that binds the event is run everytime the modal is build, you need to unbind the event or find an better place in your code to bind the event

Answer 4

You need to add following code for unbind click event when hide model

// Trigger function when modal hide
$('#mergeFieldsModal').on('hide.bs.modal', function(event)
{
     var btnMergeField = $(this).find('#btnMergeField');
     btnMergeField.unbind("click");
});

Demo

Answer 5

Call

btnMergeField.unbind('click');

before binding the click handler. Otherwise the click handler, that you have bound on last dialog open is still active.

As an alternative you might bind the click handler somewhere globally, so that there's no need to call unbind()/bind() again and again. Something like this:

$("*").on('click', "div[id=mergeFieldsModal]", function(){
    ...
    return false;
});