jQuery .on ('परिवर्तन'), फ़ंक्शन () {} गतिशील रूप से बनाए गए इनपुट के लिए ट्रिगर नहीं

Question

समस्या यह है कि मेरे पास कुछ गतिशील रूप से इनपुट टैग के सेट हैं और मेरे पास एक फ़ंक्शन भी है जो किसी भी समय इनपुट मान को बदलने के लिए ट्रिगर करने के लिए है।

$('input').on('change', function() {
  // Does some stuff and logs the event to the console
});

हालाँकि, .on('change')किसी भी गतिशील रूप से बनाए गए इनपुट के लिए ट्रिगर नहीं किया जा रहा है, केवल उन वस्तुओं के लिए जो पृष्ठ लोड होने पर मौजूद थे। दुर्भाग्य से यह मुझे एक बाँध के एक बिट में छोड़ देता .onहै, जिसका अर्थ प्रतिस्थापन के लिए है .live()और .delegate()सभी के लिए रैपर हैं .bind(): /

किसी और को इस समस्या या समाधान का पता था?

Answer 1

आपको onफ़ंक्शन का चयनकर्ता प्रदान करना चाहिए :

$(document).on('change', 'input', function() {
  // Does some stuff and logs the event to the console
});

उस स्थिति में, यह आपकी अपेक्षा के अनुरूप काम करेगा। साथ ही, दस्तावेज़ के बजाय कुछ तत्व निर्दिष्ट करना बेहतर है।

बेहतर समझ के लिए इस लेख को पढ़ें: http://elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/

Comments

आप कमाल के है! मुझे भी यह समस्या हो रही थी। कभी नहीं सोचा था कि आप दूसरे पैरामीटर के रूप में चयनकर्ता को जोड़ सकते हैं।

— टॉमट्रोक्स

हाँ जैसा कि पूरे दस्तावेज़ के बजाय कुछ तत्व को संकीर्ण करने के लिए अपना अच्छा बताया गया है, अगर मामले में डायनामिक हिस्सा इसके कुछ डिव के बाद उपयोग करता है, उदाहरण के लिए: $ ('# ajax_table')। ('परिवर्तन') 'इनपुट' पर। ', फंक्शन () {...

— राउल गोमेज़

यदि मेरे तत्व ने बहुत अधिक काम किया है, तो मैं बाद में इसके साथ कैसे काम कर सकता हूं? $ यह मुझे खाली वस्तु देता है।

— एलेक्सेला

यह एक सम्मोहन की तरह काम करता है। आपका बहुत बहुत धन्यवाद ! इसके अलावा, हम .once () को एक ही तर्क से दो बार जोड़ने से रोकने के लिए उपयोग कर सकते हैं;)

— benftwc

अल्टरनेट सिंटैक्स: $(document).on({ change: handleChange }, 'input');प्लस फ़ंक्शन const handleChange = (event) => { $(event.target)...परेशानी से बचने के लिए अच्छा है this।

— डेम पिलाफियन 20

Answer 2

इसे इस्तेमाल करो

$('body').on('change', '#id', function() {
  // Action goes here.
});

Comments

FYI करें, @enrey $('#id')'#id'

— Loaf

Answer 3

आप किसी भी एक दृष्टिकोण को लागू कर सकते हैं:

$("#Input_Id").change(function(){   // 1st
    // do your code here
    // When your element is already rendered
});


$("#Input_Id").on('change', function(){    // 2nd (A)
    // do your code here
    // It will specifically called on change of your element
});

$("body").on('change', '#Input_Id', function(){    // 2nd (B)
    // do your code here
    // It will filter the element "Input_Id" from the "body" and apply "onChange effect" on it
});

Answer 4

$("#id").change(function(){
    //does some stuff;
});

Comments

हम्म ... कैसे के बारे में स्निपेट की एक बिट व्याख्या?

— kleopatra

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

— फुलीहुमनप्रोग्रामर

यह कोड तब तक काम नहीं करेगा जब तक कि यह प्री-लोडेड डोम का उपयोग न करे। आपको चयनकर्ता को दस्तावेज़-संबंधित चर api.jquery.com/on/#on-events-selector-data

— benftwc

Answer 5

बस कुछ संभावित भ्रम को स्पष्ट करने के लिए। यह केवल तब काम करता है जब कोई तत्व DOM लोड पर मौजूद हो:

$("#target").change(function(){
    //does some stuff;
});

जब कोई तत्व गतिशील रूप से बाद में लोड होता है तो आप इसका उपयोग कर सकते हैं:

$(".parent-element").on('change', '#target', function(){
   //does some stuff;
});

Answer 6

$(document).on('change', '#id', aFunc);

function aFunc() {
  // code here...
}

Answer 7

आप 'इनपुट' ईवेंट का उपयोग कर सकते हैं, जो तब होता है जब कोई तत्व उपयोगकर्ता इनपुट प्राप्त करता है।

$(document).on('input', '#input_id', function() {
  // this will fire all possible change actions
});

w3 से प्रलेखन

Answer 8

आप उपयोग कर सकते हैं:

$('body').ready(function(){
   $(document).on('change', '#elemID', function(){
      // do something
   });
});

यह मेरे साथ काम करता है।