Val () jQuery में परिवर्तन () को ट्रिगर नहीं करता है

Question

changeजब मैं बटन के साथ इसका मान बदलता हूं, तो मैं टेक्स्ट बॉक्स पर ईवेंट को ट्रिगर करने की कोशिश कर रहा हूं , लेकिन यह काम नहीं करता है। इस फिडल को चेक करें ।

यदि आप टेक्स्ट बॉक्स में कुछ टाइप करते हैं और कहीं और क्लिक करते हैं, changeतो ट्रिगर हो जाता है। हालाँकि, यदि आप बटन पर क्लिक करते हैं, तो टेक्स्ट बॉक्स का मूल्य बदल जाता है, लेकिन changeट्रिगर नहीं होता है। क्यों?

Comments

jQuery के टेक्स्टबॉक्स

शीर्षक ने ही मेरे प्रश्न का उत्तर दिया। .Change () पीले "नोट पर पुष्टि की गई : उदाहरण के लिए, .val () का उपयोग करके जावास्क्रिप्ट का उपयोग करते हुए एक इनपुट तत्व का मूल्य बदलना, घटना को आग नहीं देगा।"

— बॉब स्टीन

काश मैं stackoverflow.com/questions/11873721/… जितनी जल्दी आता, उम्मीद है कि यह कुछ मदद करता है।

— ज्येष्ठतम

Answer 1

onchange केवल उपयोगकर्ता जब इनपुट में टाइप करता है, तो इनपुट फोकस खो देता है।

onchangeमान सेट करने के बाद आप मैन्युअल रूप से ईवेंट का उपयोग कर सकते हैं :

$("#mytext").change(); // someObject.onchange(); in standard JS

वैकल्पिक रूप से, आप ईवेंट को ट्रिगर कर सकते हैं :

$("#mytext").trigger("change");

Comments

jquery का विस्तार करने और ऐसा कहने के लिए स्वतंत्र महसूस करें कि क्या आप चाहते हैं कि क्या करेंगे। यह कई बार के रूप डिफ़ॉल्ट कार्रवाई नहीं हो सकता आप घटना एक स्वचालित मूल्य परिवर्तन से ट्रिगर नहीं करना चाहते, केवल जब वाला तत्व उपयोगकर्ता सूचना का आदान प्रदान

— redsquare

मैं इस उत्तर .change()को .val()विधि के लिए जंजीर के विकल्प को संबोधित करने के लिए संपादित देखना चाहूंगा ।

— स्नेक

इसका कारण यह हो सकता है कि कुछ लोग कॉल .val()करते हैं .change()क्योंकि वे इनपुट सत्यापन करते हैं। ट्रिगर .change()पर .val()एक अनंत लूप का कारण होगा।

— यिंग

केवल अगर वे किसी ऐसी चीज़ का मूल्य बदल रहे हैं जो उनके स्वयं के सत्यापन को विफल कर देगा, जो मूर्खतापूर्ण होगा।

— लेंग

मैंने blurकुछ इसी तरह पूरा करने के लिए बंधन समाप्त कर दिया :$('#mytext').focus().val('New text').blur();

— वेस जॉनसन

Answer 2

Redsquare के उत्कृष्ट सुझाव से, यह अच्छी तरह से काम करता है:

$.fn.changeVal = function (v) {
    return this.val(v).trigger("change");
}

$("#my-input").changeVal("Tyrannosaurus Rex");

Comments

आपको लपेटने की आवश्यकता नहीं है this:return this.val(v).trigger("change");

— श्री पॉलीविरल

Answer 3

आप valफ़ंक्शन को मूल valफ़ंक्शन के लिए प्रॉक्सी के साथ बदलकर ट्रिगर करने के लिए फ़ंक्शन को आसानी से ओवरराइड कर सकते हैं ।

अपने कोड में कहीं न कहीं इस कोड को जोड़ें (jQuery लोड करने के बाद)

(function($){
    var originalVal = $.fn.val;
    $.fn.val = function(){
        var result =originalVal.apply(this,arguments);
        if(arguments.length>0)
            $(this).change(); // OR with custom event $(this).trigger('value-changed');
        return result;
    };
})(jQuery);

एक कार्य उदाहरण: यहाँ

(ध्यान दें कि यह हमेशा ट्रिगर होगा changeजब val(new_val)मूल्य कहा जाता है, भले ही इसे वास्तव में नहीं बदला जाए।)

यदि आप परिवर्तन को केवल तभी ट्रिगर करना चाहते हैं जब मूल्य वास्तव में बदल जाता है, तो इस का उपयोग करें:

//This will trigger "change" event when "val(new_val)" called 
//with value different than the current one
(function($){
    var originalVal = $.fn.val;
    $.fn.val = function(){
        var prev;
        if(arguments.length>0){
            prev = originalVal.apply(this,[]);
        }
        var result =originalVal.apply(this,arguments);
        if(arguments.length>0 && prev!=originalVal.apply(this,[]))
            $(this).change();  // OR with custom event $(this).trigger('value-changed')
        return result;
    };
})(jQuery);

उसके लिए लाइव उदाहरण: http://jsfiddle.net/5fSmx/1/

Comments

हम्म, अनावश्यक बत्तख-पैचिंग, मुझे लगता है :- पी। बेहतर हो सकता है, जैसा कि redsquare द्वारा टिप्पणी की गई है , इस तरह के एक समारोह को एक अलग नाम दें .val()।

— बिंकी जू

यदि आप इसका नाम बदलते हैं तो आपको अपना मौजूदा कोड बदलना चाहिए - इस तरह आपका मौजूदा कोड काम करना जारी रखेगा

— यारॉन यू।

लेकिन तब सभी कोड जो .val()मन में सही परिभाषा के साथ लिखे गए थे, अचानक से साइड-इफेक्ट्स का उत्पादन शुरू कर देंगे :-p।

— बिंकी जू

यह प्लगइन्स की खराबी भी बना देगा, जो शायद आसानी से ठीक नहीं हो सकता है

— SoWhat

साइड इफेक्ट्स से बचने के लिए, मैंने ऊपर के रूप में वैल फ़ंक्शन को संशोधित किया है, लेकिन मैं एक अलग ईवेंट ("वैल") को ट्रिगर कर रहा हूं, जो मुझे मौजूदा कोड रखने की अनुमति देता है, लेकिन जब भी मुझे आवश्यकता होती है: $ (... ) .on ('चेंज वैल', ...)

— ulu

Answer 4

आपको इस तरह विधि की श्रृंखला बनाने की आवश्यकता है:

$('#input').val('test').change();

Comments

चैनिंग के लिए <3!

— गुस्तावव गिल

Answer 5

मान सेट करने के बाद आपको इसे मैन्युअल रूप से ट्रिगर करने की आवश्यकता नहीं हो सकती है:

$('#mytext').change();

या:

$('#mytext').trigger('change');

Answer 6

ऐसा लग रहा है कि घटनाएँ बुदबुदाती नहीं हैं। इसे इस्तेमाल करे:

$("#mybutton").click(function(){
  var oldval=$("#mytext").val();
  $("#mytext").val('Changed by button');
  var newval=$("#mytext").val();
  if (newval != oldval) {
    $("#mytext").trigger('change');
  }
});

आशा है कि ये आपकी मदद करेगा।

मैंने $("#mytext").trigger('change')पुराने मूल्य को सहेजे बिना सिर्फ एक सादे पुराने की कोशिश की , और .changeमूल्य में बदलाव नहीं होने पर भी आग। यही कारण है कि मैंने पिछले मूल्य को बचाया और $("#mytext").trigger('change')केवल तभी कॉल किया जब यह बदलता है।

Comments

आश्चर्य की बात यह है कि इसमें अधिक वोट नहीं थे, क्योंकि यह HTML तत्व परिवर्तन का वर्तमान प्रभावी कार्यान्वयन है।

— Vol7ron

Answer 7

के रूप में feb 2019 .addEventListener()वर्तमान में jQuery के साथ काम नहीं कर रहा है .trigger()या .change(), आप इसे क्रोम या फ़ायरफ़ॉक्स का उपयोग करके नीचे परीक्षण कर सकते हैं।

txt.addEventListener('input', function() {
  console.log('not called?');
})
$('#txt').val('test').trigger('input');
$('#txt').trigger('input');
$('#txt').change();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txt">

आपको .dispatchEvent()इसके बजाय उपयोग करना होगा।

txt.addEventListener('input', function() {
  console.log('it works!');
})
$('#txt').val('yes')
txt.dispatchEvent(new Event('input'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="txt">

Answer 8

से https://api.jquery.com/change/ :

changeघटना एक तत्व के लिए भेजा जब अपने मूल्य में परिवर्तन किया गया है। यह घटना <input>तत्वों, <textarea>बक्से और <select>तत्वों तक सीमित है । चुनिंदा बॉक्स, चेकबॉक्स और रेडियो बटन के लिए, घटना को तुरंत निकाल दिया जाता है जब उपयोगकर्ता माउस के साथ एक चयन करता है, लेकिन अन्य तत्वों के लिए जब तक तत्व ध्यान केंद्रित नहीं करता तब तक घटना को स्थगित कर दिया जाता है।

Answer 9

मुझे पता है कि यह एक पुराना धागा है, लेकिन दूसरों को देखने के लिए, उपरोक्त समाधान शायद उतना अच्छा नहीं है, जो changeघटनाओं की जाँच करने के बजाय , घटनाओं की जाँच करें input।

$("#myInput").on("input", function() {
    // Print entered value in a div box
    $("#result").text($(this).val());
});