코드 실행을 위해 체크 박스 클릭 이벤트가 중단되었지만 $ .trigger ('click')는 Firefox가 아닌 Chrome에서만 인식됩니다. 왜?

Question

click 이벤트가 완료되기 전에 javascript/jQuery 코드를 실행할 수 있도록 체크 박스 클릭 이벤트를 방해하는 복잡한 체계가 있습니다 (예 : 상자가 선택됨).

그러나 Chrome (기본 브라우저) 및 Firefox (소수의 사용자가 사용함)에서 코드를 적용 할 때 다른 동작을 발견했습니다.

이 바이올린 example에서 일련의 이벤트는 Chrome에서 잘 작동하지만 파이어 폭스에서 동일한 이벤트를 시도하면 프로그래밍 방식 .trigger('click')이 이벤트 리스너를 트리거하지 않습니다. 왜? 내가 봤는데 어쩌면 뭔가를 $.trigger() 방법과 함께 봤어?

내 코드 :

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>

업데이트 : Th이 내 코드를 단순화 맨손 요소와 나는 그 행동이 파이어 폭스에서 후속 .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>

그러나 다른 방법으로 해결 될 수있다.