The flag click event is aborted to run the code, but $ .trigger ('click') will only be recognized in Chrome, not Firefox. What for?

Question

I have a convoluted flag selection event interruption scheme, so I can run some javascript / jQuery code before the click event is completed (i.e. the checkbox is checked).

But I noticed several different actions when applying the code in Chrome (my base browser) and Firefox (used by a smaller set of my users).

In this example script, the sequence of events works fine in Chrome, but if you try the same thing in firefox, the software .trigger('click') does not call the event listener. What for? I searched for it and maybe something related to the $.trigger() method?

My code is:

HTML:

 <input type="checkbox" id="foo"> Clicky! <hr> <textarea id="bar"></textarea> <hr> <textarea id="cons"></textarea> 

JS (using jQueryUI dialog)

 $("#dialog").dialog({ autoOpen: false }); $("#foo").on('mousedown', function(e) { e.preventDefault(); // stop mousedown propagation $("#foo").prop('checked', false).prop("disabled", true); // disable checkbox from checking if (!$("#foo").is(":checked")) { // if not checked, run script // Open a modal while checkbox event is paused $("#dialog").dialog('open').dialog({ title: "Hey! Here is a modal", modal: 'true', buttons: { "OK": function() { // run a script while modal running during checkbox pause $("#bar").val("checkbox paused, script run"); // release checkbox disable & // programmatically complete the check $("#foo").prop('disabled', false); $("#foo")[0].click(); // This click event completes and the click listener fires below in Chrome, but not on firefox? Why oh why? $("#dialog").dialog('close'); } } }); } }); $("input:checkbox").on("click", function() { $("#cons").val("check completed!"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <input type="checkbox" id="foo"> Clicky! <hr> <textarea id="bar"></textarea> <hr> <textarea id="cons"></textarea> <div id="dialog"> A modal opens </div> 

Update: I simplified my code to simple elements, and I can demonstrate that the behavior is specific to trigger a dialog (or warning or any modal) that breaks the subsequent .trigger ('click') method in firefox. simplified example

Answer 1

Do you really need to disable the checkbox?
When you close modal mode, it takes some time to change the disabled property to false (in Firefox). Therefore, we need to wait until the checkbox is turned on again. Otherwise, the trigger “clicks” on the disabled flag with no result.
Look at the snippet, I set the timeout on the trigger, and it works:

 $('#bar').on('click', function() { $("#foo").prop('disabled', true); alert("pause"); // alert, modal, dialog all break trigger event $("#foo").prop('disabled', false); // wait... setTimeout(function() { $("#foo").trigger('click') }, 100); }); $("input:checkbox").on("change", function() { $("#baz").val("check completed!"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" id="foo"> <hr> <button id="bar">Checker</button> <hr> <textarea id="baz"></textarea> 

But it can be solved in a different way.