2017-12-26 89 views
5

मेरे पास एक चेकबॉक्स क्लिक ईवेंट को बाधित करने के लिए एक ठोस योजना है, इसलिए क्लिक ईवेंट पूरा होने से पहले मैं कुछ जावास्क्रिप्ट/jQuery कोड चला सकता हूं (यानी बॉक्स चेक किया गया है)।

लेकिन, क्रोम (मेरा बेस ब्राउज़र) और फ़ायरफ़ॉक्स (मेरे उपयोगकर्ताओं के एक छोटे से सेट द्वारा उपयोग किए जाने वाले कोड) में कोड लागू करते समय मैंने कुछ अलग व्यवहार देखा है।

इस पहेली में example, घटनाओं का अनुक्रम क्रोम में ठीक काम करता है, लेकिन यदि आप फ़ायरफ़ॉक्स में इसे आजमाते हैं, तो प्रोग्रामेटिक .trigger('click') ईवेंट श्रोता को ट्रिगर नहीं करता है। क्यूं कर? मैंने इसे $.trigger() विधि के साथ किया है और शायद कुछ करने के लिए किया है?

मेरे कोड:

HTML:

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

<hr> 

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

<hr> 

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

जे एस (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>

अद्यतन: मैं th करने के लिए अपने कोड को सरल बनाया ई नंगे तत्व और मैं यह प्रदर्शित कर सकता हूं कि व्यवहार संवाद (या अलर्ट या कोई मोडल) लॉन्च करने के लिए विशिष्ट है, जो फ़ायरफ़ॉक्स में बाद में .trigger ('क्लिक') विधि को तोड़ देता है। simplified example

उत्तर

1

क्या आपको वास्तव में चेकबॉक्स को अक्षम करने की आवश्यकता है?
जब आप मोडल बंद करते हैं, तो disabled संपत्ति को false (फ़ायरफ़ॉक्स में) में बदलने में कुछ समय लगता है। इसलिए हमें तब तक इंतजार करना होगा जब तक कि चेकबॉक्स फिर से सक्षम न हो जाए। अन्यथा बिना किसी परिणाम के अक्षम अक्षम चेकबॉक्स पर ट्रिगर 'क्लिक'। टुकड़ा पर
देखो, मैं ट्रिगर पर एक टाइमआउट निर्धारित किया है और यह काम करता है:

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

लेकिन यह एक अलग तरीके से हल किया जा सकता।

+0

सभी hypnotoad जय हो !! यह वही है जो मैं खोज रहा हूं - बहुत बहुत धन्यवाद। उपयोग के मामले के रूप में, मैं मानता हूं कि यह कुछ हद तक शांत है, लेकिन शौकिया प्रोग्रामर के रूप में मेरी सीमाओं के भीतर, यह मेरे लिए सबसे कठोर समाधान प्रतीत होता है। मेरे मामले में, मेरे उपयोगकर्ता माउस क्लिक के मेनू के माध्यम से मेरे वेब ऐप से बातचीत करेंगे। कुछ पूर्व चयनों के आधार पर, मुझे प्रभाव को संशोधित करने की आवश्यकता है जब मेरा चेकबॉक्स श्रोता फ़ायर क्लिक करता है - यही कारण है कि मैं अक्षम करके चेकबॉक्स को रोकता हूं -> कुछ कोड चला रहा है -> क्लिक अनुक्रम को समाप्त करना। हालांकि यह सामान्य रूप से ऐसा करने के लिए एक बेहतर तरीका जानना अच्छा लगेगा। – user1837608

+0

जैसे ही एसओ मुझे देता है मैं आपकी बक्षीस दे दूंगा। – user1837608

+0

मैं सुझाव देता हूं कि आप वादे देखें: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ समझौता –

संबंधित मुद्दे