Why is this callback handler called twice?

Question

So, I have the following JavaScript code. When the user clicks a button on the page, he reads the "name" and "stepId" from the data attributes, and then opens the bootstrap loading modal dialog. When the "Clear" button is clicked in the dialog box, it launches the requested response.

This works great on the first call. The problem is that with all subsequent calls, when you click the Clear button, the callback starts twice. In the first callback, we see stepId from the first call, and in the second callback we see stepId from the current call.

clearInputTargetName and clearInputName are always the correct values ​​in the dialog box.

 var Dialog = function (dlgId) { var okCallback = null; var show = function (cb) { okCallback = cb; jQuery.noConflict(); $(dlgId).modal("show"); }; var hide = function () { jQuery.noConflict(); $(dlgId).modal("hide"); }; var onOK = function () { okCallback(); }; var init = function () { $(dlgId + " .okButton").off('click').on('click', function () { onOK(true); hide(); }); }; init(); return { show: show, hide: hide, init: init }; }; var ClearInputDialog = function () { var show = function (input, cb) { var dlg = new Dialog("#clearInputDialog", input); $("#clearInputTargetName").text(input); $("#clearInputName").text(input); dlg.show(function () { cb(true); dlg.hide(); }); }; return { show: show }; }; var WorkflowDesignerVM = function () { var clearInput = function () { var name = $(this).attr("data-input"); var stepId = $(this).attr("data-stepid"); var dlg = new ClearInputDialog(); dlg.show(name, function (result) { alert('clearing stepId: ' + stepId); }); }; var init = function () { $(document).on("click", ".clear-input", clearInput); }; init(); }; var vm = new WorkflowDesignerVM(); 

And the modal dialog box looks like this:

 <div id="clearInputDialog" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title">Clear Input for <span id="clearInputTargetName">[clearInputTargetName]</span></h4> </div> <div class="modal-body"> Are you sure you want to clear <span id="clearInputName">[clearInputName]</span>? </div> <div class="modal-footer"> <button type="button" class="btn btn-default cancelButton" data-dismiss="modal">Close</button> <button type="button" id="clearInputButton" class="btn btn-primary okButton" data-stepid="" data-input="">Clear</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> 

I have a feeling this is due to my jQuery event handler code. If I changed Dialog.init to the following code, then we always get one callback, but we always see stepId from the first call.

 var init = function () { $(dlgId + " .okButton").on('click', function () { onOK(true); hide(); $(dlgId + " .okButton").off('click'); }); }; 

Answer 1

Try adding event stop propagation to your click function, and add return false. This will stop any event propagation or double calls. Also, instead of using the off () function. On () ... just try .live (), and then use off () when you are ready to remove the click event, when the click is inaccessible to the user, and also delete it from memory.

 $(dlgId + " .okButton").live('click', function (event) { event.stopImmediatePropagation(); event = null; onOK(true); hide(); return false; });