Javascript/JQuery Callback confusion

Question

I've a Modal which I show for confirmation:

<div class="modal" tabindex="-1" role="dialog" id="modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
             ... Body ...
            <div class="modal-footer">
                <button type="button" id="btnCancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" id="btnOk" class="btn btn-primary" data-dismiss="modal">Ok</button>
            </div>
        </div>
    </div>
</div>

Here is the code for showing the above Modal..

var M = {
 confirm: function(body, yes, no) {
    $('#btnCancel').on('click', function() {
       $('#btnCancel').off();
       $('#confirm-modal').modal('hide');
       if (no) {
            return no();
       }
    });
    $('#btnOk').on('click', function() {
      $('#btnOk').off(); 
      $('#modal').modal('hide');
      if (yes) {
         return yes();
      }
    });
  }
}

And here is how I am using it... (In any view for example)

M.confirm("Body", function(){
   // Function Body
})

Now, the problem is: If I call confirm, it shows the Modal. But if I click Cancel and than again call confirm and this time, I hit OK: the function (second param in the snippet above) is called twice. If I hit cancel 10 times, the function above is called 10 times.

Any idea why this is happening?

Thank You.

You are assigning event handlers every time you call confirm(). So the second time you call confirm, you are adding another set of handlers (not replacing the old ones). You should remove the event handlers from the confirm() function and just assign them once. — Scott Marcus
– Scott Marcus, Commented Apr 21, 2021 at 14:41
@JeremyThille That's a bit misleading since you can add multiple listeners with one() but each only gets called once. jsfiddle.net/oubm4vtx — charlietfl
– charlietfl, Commented Apr 21, 2021 at 14:57

Quentin · Accepted Answer · 2021-04-21 14:41:33Z

1

Every time you call confirm you add an event handler to each of btnCancel and btnOk.

However, you only remove the effect handler on one of those buttons when that button is clicked.

So if you call confirm, then click btnCancel, then call confirm you'll have two event handlers on btnOK: One from the first call to confirm and once from the second.

When either button is clicked you need to remove both event handlers.

… or just add the event handlers when the document is loaded and don't touch them thereafter.

answered Apr 21, 2021 at 14:41

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript/JQuery Callback confusion

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related