जब मैं val () का उपयोग करके एक चयन के मान को सेट करता है तो jQuery परिवर्तन ईवेंट क्यों ट्रिगर नहीं करता?


जब मान val() द्वारा निर्धारित किया जाता है तो change() ईवेंट हैंडलर को चलाने में नहीं चल रहा है, लेकिन जब उपयोगकर्ता अपने माउस के साथ एक मान का चयन करता है ऐसा क्यों है?

<select id="single">
    <option>Single</option>
    <option>Single2</option>
</select>

<script>
    $(function() {
        $(":input#single").change(function() {
           /* Logic here does not execute when val() is used */
        });
    });

    $("#single").val("Single2");
</script>


Answers



क्योंकि change ईवेंट को जावास्क्रिप्ट कोड के बजाय उपयोगकर्ता द्वारा शुरू की गई वास्तविक ब्राउज़र इवेंट की आवश्यकता होती है।

इसे इसके बजाय करें:

$("#single").val("Single2").trigger('change');



मेरा मानना ​​है कि आप trigger() साथ परिवर्तन ईवेंट को मैन्युअल रूप से ट्रिगर कर सकते हैं:

$("#single").val("Single2").trigger('change');

हालांकि यह स्वचालित रूप से क्यों नहीं पड़ता है, मुझे पता नहीं है।




जहां तक ​​मैं एपीआई में पढ़ सकता हूं। ईवेंट को केवल तब निकाल दिया जाता है जब उपयोगकर्ता एक विकल्प पर क्लिक करता है।

http://api.jquery.com/change/

चुनिंदा बक्से, चेकबॉक्स और रेडियो बटन के लिए, घटना को तब तुरंत निकाल दिया जाता है जब उपयोगकर्ता माउस के साथ चयन करता है, लेकिन अन्य तत्व प्रकारों के लिए घटना तब तक स्थगित हो जाता है जब तक तत्व फोकस नहीं खोता है




Val () काम करने के बाद इस कोड का टुकड़ा जोड़ना:

$(":input#single").trigger('change');



इसे एक कस्टम फ़ंक्शन जोड़ना और इसे कॉल करने के लिए जब भी आप चाहते हैं कि मान बदलना भी परिवर्तन को गति प्रदान करता है

$.fn.valAndTrigger = function (element) {
    return $(this).val(element).trigger('change');
}

तथा

$("#sample").valAndTirgger("NewValue");

या जब आप val को कहा जाता है तो आप हमेशा कॉल को बदलने के लिए वैल फ़ंक्शन को ओवरराइड कर सकते हैं

(function ($) {
    var originalVal = $.fn.val;
    $.fn.val = function (value) {
        this.trigger("change");
        return originalVal.call(this, value);
    };
})(jQuery);

Http://jsfiddle.net/r60bfkub/ पर नमूना




यदि आप डिफ़ॉल्ट परिवर्तन ईवेंट के साथ मिश्रण नहीं करना चाहते हैं, तो आप अपना कस्टम ईवेंट प्रदान कर सकते हैं

$('input.test').on('value_changed', function(e){
    console.log('value changed to '+$(this).val());
});

मूल्य सेट पर ईवेंट को ट्रिगर करने के लिए, आप ऐसा कर सकते हैं

$('input.test').val('I am a new value').trigger('value_changed');



$(":input#single").trigger('change');

यह मेरी स्क्रिप्ट के लिए काम किया मेरे पास 3 कॉमोज़ और चेन से बाइंड करें, चयन करें इवेंट, मुझे यूआरएल के द्वारा 3 वैल्यू पास करने की जरूरत है और डिफॉल्ट सभी ड्रॉप डाउन चुनें मैं इसका इस्तेमाल करता था

$('#machineMake').val('<?php echo $_GET['headMake']; ?>').trigger('change');

और पहली बार काम किया




Wordpress के साथ CMB2 का उपयोग करते हुए मुझे एक ही मुद्दे पर भागा गया और फ़ाइल अपलोड मेटाबोक्स के बदलने की घटना में हुक करना चाहता था।

इसलिए यदि आप कोड को संशोधित करने में सक्षम नहीं हैं जो बदलाव को आमंत्रित करता है (इस मामले में CMB2 स्क्रिप्ट), नीचे दिए गए कोड का उपयोग करें मूल्य निर्धारित होने के बाद ट्रिगर की मांग की जा रही है, अन्यथा आपका इवेंटहाण्डलर काम करेगा, लेकिन यह मान पिछले एक होगा, न कि सेट होने पर

यहां कोड का उपयोग किया गया है I

(function ($) {
    var originalVal = $.fn.val;
    $.fn.val = function (value) {
        if (arguments.length >= 1) {
            // setter invoked, do processing
            return originalVal.call(this, value).trigger('change');
        }
        //getter invoked do processing
        return originalVal.call(this);
    };
})(jQuery);



यदि आपने अभी एक विकल्प के लिए विकल्प का चयन किया है और आप बदलाव की घटना को ट्रिगर करना चाहते हैं, तो मुझे एक सेटटैमआउट की आवश्यकता है अन्यथा jQuery नए जोड़े गए चयन बॉक्स को नहीं उठाएगी:

window.setTimeout(function() { jQuery('.languagedisplay').change();}, 1);