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

Question

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

<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>

Answer 1

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

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

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

या

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

Comments

नमस्ते, इस अद्यतन को नीचे गिरा रहा है। लेकिन onChange () को पुनरावर्ती कहा जा रहा है।

— पंकज

मैंने इस जवाब को खोद दिया। यह काम करता है, लेकिन jQuery के साथ एक बेहतर तरीका नहीं है? मुझे यकीन है कि हम हर बार ऐसा करने के लिए याद करेंगे जब हम एक मूल्य को बदलते हैं जिसमें एक परिवर्तन हैंडलर स्थापित होता है (व्यंग्य)। डेटा बाइंडिंग का उपयोग करने वाले फ्रेमवर्क इस बेहतर हल कर सकते हैं?

— जेस

@ user113716 क्या आप जानते हैं कि बिना किसी मूल्य को जाने इसे कैसे टिगर किया जा सकता है?

— BKSpurgeon

मैं मानता हूं कि यह सही उत्तर है लेकिन यह बिल्कुल बेकार है और बर्बाद करता है जो मैं करने की कोशिश कर रहा हूं।

— डस्टिन पॉइसैंट

$ ("# एकल") आज़माएं। ट्रिगर ({प्रकार: "परिवर्तन", वैल: "

— सिंगल 2

Answer 2

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

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

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

Comments

मैं यह काम करने में सक्षम नहीं हूं, यह भी $ ("# सिंगल") है। वैल ("सिंगल 2")। परिवर्तन (); मैं गतिशील रूप से ड्रॉपडाउन बना रहा हूं और इसका मूल्य बदल रहा हूं (इसके लिए मेरे लिए काम करना ठीक है) लेकिन जब मैं इसे बदलने की कोशिश कर रहा हूं तो यह मेरे लिए काम नहीं कर रहा है।

— मनेश कुमार

एक "बिट" का दावा किया गया है लेकिन यह स्वचालित रूप से आग नहीं करता है क्योंकि यह अनंत छोरों को जन्म देगा। विचार$('#foo').change(function() { $( this ).val( 'whatever' ); });

— JJJ

@ जुहाना मुझे लगता है कि एक अनन्त लूप वैल की तुलना में नोटिस, निदान और ठीक करने के लिए बहुत आसान है () रहस्यमय रूप से "परिवर्तन" बाइंडिंग को ट्रिगर करने में विफल।

— आयन

कॉलिंग .change () कॉलिंग के लिए शॉर्टहैंड है .trigger ('परिवर्तन')।

— त्रिवेंको

Answer 3

वैल के बाद कोड का यह टुकड़ा जोड़ना () काम करने लगता है:

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

Comments

हां, लेकिन आपको इसके लिए एक अलग DOM चयन करने की आवश्यकता नहीं है $(":input#single")। वास्तव में आप वास्तव में नहीं करना चाहिए। बस इसके बाद चेन .val()। आप उपयोग कर सकते हैं .trigger('change')या .change()। वे ठीक उसी तरह हैं।

— user113716

Answer 4

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

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

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

Comments

अन्य तत्व प्रकारों के लिए विकल्प क्या हैं? मैं चाहता हूं कि 'परिवर्तन' घटना inputतत्वों के लिए तुरंत फायर करे , न कि जब तत्व ध्यान केंद्रित करता है। क्या आप जानते हैं?

— डैन निसेनबाम

यदि "तुरंत" से आपका मतलब है "जब भी एक कुंजी इनपुट में दबाया जाता है" तो आप onkeyup, onkeypress और onkeydown ईवेंट की तलाश कर रहे हैं, ऑनकॉन्ग नहीं।

— user2867288

Answer 5

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

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

तथा

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

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

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

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

Comments

मेरा ब्राउज़र बहुत अधिक पुनरावृत्ति की शिकायत करता है, इसके लिए कोई फिक्स?

— भार्गव नानकेलवा

आप changeएक नियंत्रण पर -event के लिए सुन रहे हैं और एक कॉलबैक को निष्पादित कर रहे हैं जो (प्रत्यक्ष या अप्रत्यक्ष रूप से) changeएक ही नियंत्रण पर -event को फिर से चलाता है । मैं आपको सुझाव देता हूं कि आप उस घटना के लिए एक और नाम का उपयोग करें, जिसे आप मैन्युअल रूप से ट्रिगर करते हैं (उदाहरण के लिए explicit.change), ताकि यह change-ईवेंट को फिर से ट्रिगर न करे, लूप को रोकता है, और फिर भी आपको घटना पर प्रतिक्रिया करने की अनुमति देता है।

— कामाफेदर

Answer 6

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

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

Answer 7

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

इसलिए यदि आप परिवर्तन को लागू करने वाले कोड (इस मामले में 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);

Comments

यह अच्छा है, लेकिन क्या आप दिखा सकते हैं कि आप इसे केवल एक विशेष इनपुट तक कैसे सीमित करेंगे?

— ज्यूब जूल 20'18

@jwebb काफी निश्चित है कि आपका क्या मतलब है? हम jQuery वैल () फ़ंक्शन को ओवरराइड कर रहे हैं। आप एक विशिष्ट इनपुट के लिए एक परिवर्तन ईवेंट हैंडलर को बांधते हैं।

— user2075039

मेरा मतलब है, @ user2075039, क्या होगा अगर jQuery वैल () फ़ंक्शन का उपयोग करके पृष्ठ पर कई इनपुट हैं और आप उन सभी के लिए कस्टम परिवर्तन ईवेंट हैंडलर को बांधना नहीं चाहते हैं, लेकिन उनमें से सिर्फ एक?

— jwebb

@jwebb आप एक विशिष्ट चयनकर्ता के लिए this.selectorओवरराइडिंग $.fn.valफ़ंक्शन के अंदर देख सकते हैं (चयनकर्ता के लिए इसका उपयोग किया जाता है पर निर्भर करेगा)। यह सबसे अच्छा मैं केवल विशिष्ट क्षेत्रों के लिए ऐसा करने के लिए मिला है, केवल समस्या यह है कि आपको पता होना चाहिए कि वे चयनकर्ता के लिए क्या उपयोग कर रहे हैं

— s शैलियाँ

Answer 8

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

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

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

और पहली घटना काम की।

Comments

मुझे आशा है, आप वास्तविक दुनिया में ऐसा कभी नहीं करेंगे। यह कहने की आवश्यकता नहीं है कि $ _GET ['जो भी हो] पर भरोसा नहीं किया जा सकता है।

— डेनिस वी।

Answer 9

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

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