$ (दस्तावेज़) .on ("क्लिक करें" ... काम नहीं कर रहा है?

Question

क्या एक अच्छी तरह से ज्ञात गलती है जो मैं यहां कर सकता हूं?

मुझे एक स्क्रिप्ट मिली है जो .on () का उपयोग कर रही है क्योंकि एक तत्व गतिशील रूप से उत्पन्न होता है, और यह काम नहीं कर रहा है। बस इसका परीक्षण करने के लिए, मैंने चयनकर्ता को डायनामिक एलिमेंट के रैप के साथ बदल दिया, जो स्थिर है, और यह अभी भी काम नहीं किया है! जब मैंने इसे लपेटे हुए काम के लिए सादे पुराने .click पर स्विच किया, हालाँकि।
(यह सिर्फ गतिशील तत्व के लिए काम नहीं करेगा जाहिर है, जो मायने रखता है।)

यह काम:

$("#test-element").click(function() {
    alert("click");
});

यह नहीं है:

$(document).on("click","#test-element",function() {
    alert("click");
});

अपडेट करें:

मैंने राइट-क्लिक किया और क्रोम में "इंस्पेक्ट एलिमेंट" किया, बस कुछ जांचने के लिए और फिर उसके बाद क्लिक इवेंट ने काम किया। मैंने ताज़ा किया और यह काम नहीं किया, तत्व का निरीक्षण किया, और फिर यह काम किया। इसका क्या मतलब है?

Comments

क्या आप एक ही आईडी से एक से अधिक तत्व बना रहे हैं?

— एडीनो

प्रासंगिक HTML के बिना सिर्फ jQuery पोस्ट करने से सहायता करना मुश्किल हो जाता है।

— जम्मेरीडेक

हाय्या ओपी, कृपया आपके द्वारा उपयोग किए जा रहे :)

— जेक्वेरी

आप कोड काम करने वाले हैं। onसमारोह jQuery 1.7 में जोड़ा गया है, तो सुनिश्चित करें कि आप हाल ही में एक संस्करण है। संपादित करें: आपके लिए सबूत है कि यह फिडल पर काम करता है

— फिल-आर

आपका दूसरा उदाहरण jQuery के नवीनतम 1.x संस्करण के साथ काम करता है: jsfiddle.net/AJPdS

— Wookai

Answer 1

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

यह संभवत: किसी एक के कारण काम नहीं कर रहा है:

• JQuery के हालिया संस्करण का उपयोग नहीं कर रहा है
• DOM के अंदर अपने कोड को तैयार नहीं करना
• या आप कुछ ऐसा कर रहे हैं, जिसके कारण दस्तावेज पर श्रोता को घटना न बुझे।

अपने ईवेंट श्रोताओं को घोषित करने वाले AFTER द्वारा बनाए गए तत्वों पर घटनाओं को कैप्चर करने के लिए - आपको पितृ तत्व, या पदानुक्रम में उच्चतर तत्व से बाँधना चाहिए।

उदाहरण के लिए:

$(document).ready(function() {
    // This WILL work because we are listening on the 'document', 
    // for a click on an element with an ID of #test-element
    $(document).on("click","#test-element",function() {
        alert("click bound to document listening for #test-element");
    });

    // This will NOT work because there is no '#test-element' ... yet
    $("#test-element").on("click",function() {
        alert("click bound directly to #test-element");
    });

    // Create the dynamic element '#test-element'
    $('body').append('<div id="test-element">Click mee</div>');
});

इस उदाहरण में, केवल "दस्तावेज़ के लिए बाध्य" चेतावनी आग जाएगी।

JQuery 1.9.1 के साथ JSFiddle

Comments

दुर्भाग्य से, मैं Jquery के हाल के संस्करण का उपयोग कर रहा हूं, मेरा कोड ठीक से लिपटा हुआ है, यह $ (दस्तावेज़) के अंदर है। पहले से ही, और क्लिक की जा रही घटना दस्तावेज़ में सबसे निचले स्तर का तत्व है। यह चकरा देने वाला है।

— श्री लवलमप

मैं कहता हूं "श्रोता को मूल तत्व पर रखने की आवश्यकता है" आवश्यक नहीं है, हालांकि मैं भी इसकी सिफारिश करता हूं। बुबलिंग वह काम करता है जो .on () को काम करने में सक्षम बनाता है। अगर हम तत्काल अभिभावक के पास जाने के लिए बुदबुदाई पर भरोसा नहीं कर सकते हैं, तो यह एक महान समाधान नहीं होगा।

— इंजा जूल

@ जीजा - अच्छा बिंदु और जैसा कि आप सुझाव देते हैं, 'जरूरत' सही शब्द नहीं है क्योंकि इसे पूरा करने के लिए अन्य कम आदर्श तरीके हैं। मैंने अपना उत्तर संशोधित किया।

— इसकी जेजोडी जूल

अगर मैं तत्व तत्व को संदर्भित करने के लिए "यह" का उपयोग कर रहा हूं तो मैं इसे दस्तावेज़ के साथ कैसे संलग्न कर सकता हूं ..

— आशीष जोशी

@JasonGlisson मेरा अनुमान यह होगा कि जब आपके पास दस्तावेज़ पर एक श्रोता होता है, तो या तो घटना के साथ एक समस्या होती है, जो (बटन पर क्लिक से) बुदबुदाती नहीं है, या आपके कोड में event.targetऔर event.currentTargetकहीं और के बीच का अंतर है , लेकिन कई हैं यह पॉइंटर घटनाओं को बटन पर अक्षम किए जाने सहित चीजें हो सकती हैं

— महामंदी

Answer 2

आपका कोड काम करना चाहिए, लेकिन मुझे पता है कि उत्तर आपकी मदद नहीं करता है। आप यहां (jsfiddle) एक कार्यशील उदाहरण देख सकते हैं ।

jQuery:

$(document).on('click','#test-element',function(){
    alert("You clicked the element with and ID of 'test-element'");
});

जैसा कि किसी ने पहले ही बताया, आप एक वर्ग के बजाय एक आईडी का उपयोग कर रहे हैं। यदि आपके पास ID वाले पृष्ठ पर एक तत्व अधिक है, तो jquery उस आईडी के साथ केवल पहला तत्व लौटाएगा । इसमें कोई त्रुटि नहीं होगी क्योंकि यह कैसे काम करता है। यदि यह समस्या है, तो आप देखेंगे कि क्लिक इवेंट पहली बार काम करता है, test-elementलेकिन किसी भी अनुसरण के लिए नहीं।

यदि यह समस्या के लक्षणों का सही वर्णन नहीं करता है, तो शायद आपका चयनकर्ता गलत है। आपका अपडेट मुझे विश्वास दिलाता है कि यह एक तत्व का निरीक्षण करने और फिर पृष्ठ को फिर से क्लिक करने और क्लिक ट्रिगर करने के कारण ऐसा है। इसके कारण क्या हो सकता है अगर आप इवेंट श्रोता को documentइसके बजाय वास्तविक पर रखें test-element। यदि हां, तो जब आप दस्तावेज़ को बंद करते हैं और वापस (जैसे डेवलपर विंडो से दस्तावेज़ पर वापस जाते हैं) तो ईवेंट चालू हो जाएगा। यदि यह मामला है, तो आप यह भी देखेंगे कि यदि आप दो भिन्न टैब के बीच क्लिक करते हैं तो क्लिक इवेंट चालू हो जाता है (क्योंकि वे दो अलग-अलग हैं documentऔर इसलिए आप दस्तावेज़ पर क्लिक कर रहे हैं।

यदि इनमें से कोई भी उत्तर नहीं है, तो HTML पोस्ट करना एक बहुत लंबा रास्ता तय करेगा।

Answer 3

एक पुरानी पोस्ट, लेकिन मुझे साझा करने के लिए प्यार है क्योंकि मेरे पास एक ही मामला है लेकिन मुझे आखिरकार समस्या पता थी:

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

सीधे शब्दों में, एक फ़ंक्शन केवल उस तत्व को काम करेगा जो इसके (उससे) पहले बनाया गया था। उसके बाद गतिशील रूप से बनाए गए किसी भी तत्व का मतलब है।

लेकिन कृपया इस नमूने का निरीक्षण करें जो उपरोक्त मामले को ध्यान में नहीं रखते हैं:

<div class="btn-list" id="selected-country"></div>

गतिशील रूप से जोड़ा गया:

<button class="btn-map" data-country="'+country+'">'+ country+' </button>

यह फ़ंक्शन बटन पर क्लिक करके अच्छा काम कर रहा है:

$(document).ready(function() {    
        $('#selected-country').on('click','.btn-map', function(){ 
        var datacountry = $(this).data('country'); console.log(datacountry);
    });
})

या आप शरीर का उपयोग कर सकते हैं जैसे:

$('body').on('click','.btn-map', function(){ 
            var datacountry = $(this).data('country'); console.log(datacountry);
        });

इसकी तुलना करें कि काम नहीं कर रहा है:

$(document).ready(function() {     
$('.btn-map').on("click", function() { 
        var datacountry = $(this).data('country'); alert(datacountry);
    });
});

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

Comments

यदि आप $ (दस्तावेज) .on ("क्लिक" ... $ (दस्तावेज़) .on ("क्लिक") के साथ शुरू होने पर DOM में जोड़े जाने वाले तत्व का इंतजार करने के लिए पहले से ही $ (दस्तावेज़) का उपयोग करने से बच सकते हैं। # "चयनित-देश", समारोह () {});

— लोरेन

Answer 4

यह काम:

<div id="start-element">Click Me</div>

$(document).on("click","#test-element",function() {
    alert("click");
});

$(document).on("click","#start-element",function() {
    $(this).attr("id", "test-element");
});

यहां फिडल है

Comments

यह प्रश्न के अनुसार एक गतिशील रूप से उत्पन्न तत्व नहीं है।

— इसकी जेजोडी

@itsmejodie - सहमत है, लेकिन यह गतिशील रूप से इवेंट हैंडलर के लिए बाध्य है। आईडी बदलना अनिवार्य रूप से डोम तत्व को जोड़ने से अलग नहीं है।

— २३:३३ बजे। गांजा जूल

Answer 5

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

$("#test-element").on("click" ,function() {
    alert("click");
});

इसे करने का दस्तावेज़ तरीका भी अजीब है। अगर क्लास चयनकर्ता के लिए इस्तेमाल किया जाता है, तो यह मेरे लिए समझ में आता है, लेकिन एक आईडी के मामले में आपके पास शायद बेकार डोम ट्रेवरिंग है। आईडी चयनकर्ता के मामले में, आपको वह तत्व तुरंत मिल जाता है।

Comments

यह कैसे अलग है $("#test-element").click(function() {?

— सुशांत -

आप को .on () को गतिशील रूप से उत्पन्न DOM के लिए ईवेंट को बांधने के लिए उपयोग करना होगा - कुछ भी जो कि .click () के साथ बाध्य है जब दस्तावेज़ तैयार है, तो बाइंड करने का प्रयास करेगा, और अगर डोम मौजूद नहीं है तो कुछ भी नहीं होगा।

— जेट्रवाख

लेकिन इसका उपयोग .onकिए बिना उपयोग करना selectorसीधे उस पर क्लिक इवेंट को लागू करने के समान है

— सुशांत -

यह प्रश्न का सही उत्तर नहीं है। यह सीधे तत्व से बंधेगा और इसलिए उपयुक्त नहीं है जब तत्व को गतिशील रूप से उत्पन्न किया गया हो।

— इसकी जेजोडी

मैंने वास्तव में डॉक्स पढ़ा है, लेकिन प्रदर्शन पर अनुभाग वास्तव में प्रत्यायोजित ईवेंट हैंडलर के साथ कुछ भी नहीं करता है, और आपका कोड एक प्रत्यायित ईवेंट हैंडलर नहीं है।

— एडीनो