jquery之复选框单击事件被中断以运行代码，但 $.trigger ('click' ) 只能在 Chrome 中识别，而不能在 Firefox 中识别。为什么_编程设计

我有一个复杂的方案来中断复选框单击事件，因此我可以在单击事件完成(即选中框)之前运行一些 javascript/jQuery 代码。

但是，在 Chrome(我的基本浏览器)和 Firefox(由我的一小部分用户使用)中应用代码时，我注意到一些不同的行为。

在这个 fiddle 中example ，事件序列在 Chrome 中工作正常，但如果您在 Firefox 中尝试相同的操作，则编程 .trigger('click') 不会触发事件监听器。为什么？我用谷歌搜索过它，也许与 $.trigger() 方法有关？

我的代码:

HTML:

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

JS(使用 jQueryUI 对话框)

$("#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>

更新: 我将代码简化为裸元素，并且可以演示特定于启动对话框(或警报或任何模式)的行为，这会破坏 Firefox 中后续的 .trigger('click') 方法。 simplified example

请您参考如下方法:

您真的需要禁用该复选框吗？
当您关闭模式时，需要一些时间才能将 disabled 属性更改回 false(在 Firefox 中)。因此，我们需要等待该复选框再次启用。否则，触发器会“点击”禁用的复选框，但不会产生任何结果。
看一下代码片段，我在触发器上设置了超时并且它有效:

$('#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>

但可以用不同的方式解决。