जब मैं वैल () का उपयोग कर चयन का मान निर्धारित करता हूं तो jquery परिवर्तन ईवेंट क्यों ट्रिगर नहीं करता है?


Answers

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

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

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

Question

वैल्यू 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>



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

$('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');



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

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

मैं जिस कोड का उपयोग करता हूं वह यहां है:

(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);