チェックボックスのクリックイベントが中断されてコードが実行されますが、$ .trigger（ 'クリック'）はFirefoxでは認識されず、Chromeでは認識されません。どうして？

Question

私は、クリックイベントが完了する前に（つまり、ボックスがチェックされている）いくつかのjavascript/jQueryコードを実行できるので、チェックボックスのクリックイベントを中断する複雑なスキームを持っています。

しかし、Chrome（私のベースブラウザ）とFirefox（少数のユーザーが使用）でコードを適用すると、いくつかの異なる動作に気付きました。

このフィドルexampleでは、一連のイベントはChromeでうまく動作しますが、Firefoxで同じイベントを試すと、プログラムによる.trigger('click')はイベントリスナーをトリガーしません。どうして？私はそれと恐らく$.trigger()の方法と何かをgoogledしましたか？

マイコード：

HTML：（jQueryUIダイアログを使用して）

<input type="checkbox" id="foo"> Clicky! 

<hr> 

<textarea id="bar"></textarea> 

<hr> 

<textarea id="cons"></textarea> 

JS

$("#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（ 'クリック'）メソッドを壊すダイアログ（または警告または任意のモーダル）を起動することに特有であることを実証することができます。 simplified example

Answer 1

本当にチェックボックスを無効にする必要がありますか？
モーダルを閉じると、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>

しかし、それは別の方法を解決することができます。