यह jQuery क्लिक फ़ंक्शन काम क्यों नहीं कर रहा है?

116

कोड:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $("#clicker").click(function () {
        alert("Hello!");
        $(".hide_div").hide();
    });
</script>

उपरोक्त कोड काम नहीं करता है। जब मैं # क्लिक पर क्लिक करता हूं, तो यह अलर्ट नहीं होता है और यह छिपता नहीं है। मैंने कंसोल की जाँच की और मुझे कोई त्रुटि नहीं मिली। मैंने यह देखने के लिए भी जाँच की कि क्या JQuery लोड हो रहा है और वास्तव में यह है। तो यकीन नहीं हो रहा है कि मुद्दा क्या है। मैंने एक अलर्ट के साथ एक दस्तावेज़ तैयार कार्य भी किया और यह सुनिश्चित करने के लिए काम किया कि मैं क्या गलत कर रहा हूं। कृपया मदद कीजिए। धन्यवाद!

— स्टारबक्स
स्रोत

3

डॉक्यूमेंट में कोड को लपेटें। पहले से ही

— karthikr

1

अगर कोई त्रुटि, वाक्यविन्यास या फ़ाइल नहीं मिली या कुछ और है तो क्या आपने ब्राउज़र के कंसोल की जाँच की?

— सिद्धार्थ पांडे

1

क्यों jQuery या DOM विधि जैसे getElementById के तत्व की

— user4642212

180

आप एक $(document).ready(function() {});ब्लॉक में जावास्क्रिप्ट कोड जोड़ने वाले हैं ।

अर्थात

$(document).ready(function() {
  $("#clicker").click(function () {
    alert("Hello!");
    $(".hide_div").hide();
  });
});

के रूप में jQuery प्रलेखन राज्यों: तैयार jQuery आप के लिए तत्परता के इस राज्य का पता लगाता है "एक पेज नहीं सुरक्षित रूप से जब तक दस्तावेज है चालाकी से किया जा सकता है" "कोड के अंदर शामिल।। $( document ).ready()केवल एक बार पेज दस्तावेज़ ऑब्जेक्ट मॉडल (डोम) चलेंगे जावास्क्रिप्ट के लिए तैयार है कोड निष्पादित करने के लिए "

— मोबिउस
स्रोत

7

मैं कितना बेवकूफ हूँ!! सीखने का क्रम जारी है। मैंने सोचा था कि मुझे फ़ंक्शन पर क्लिक करने की आवश्यकता नहीं है क्योंकि यह दस्तावेज़ पर क्लिक करके सक्रिय हो गया है। पहले से ही जहां यह पृष्ठ लोड पर लोड होता है।

— स्टारबक्स

7

@starbucks इसके बारे में बहुत ज्यादा चिंता न करें, हर कोई गलतियाँ करता है, और खासकर सीखने के समय :)

— mobius

4

दस्तावेज़ तैयार फ़ंक्शन श्रोताओं को इस पृष्ठ पर पाए जाने के आधार पर सेट करता है। यदि आप ऐसा नहीं करते हैं, तो वे कभी सेट नहीं होते हैं। हालांकि, ऐसा करने का सबसे अच्छा तरीका उन्हें इसके बजाय "ऑन ()" फ़ंक्शन के साथ सौंपना है। इस तरह से लोड होने के बाद भी कोई भी तत्व पेज पर जुड़ जाएगा!

— सीन केंडल

1

इसके अलावा, "ऑन" फ़ंक्शन के साथ, आपको वास्तव में दस्तावेज़ तैयार फ़ंक्शन का उपयोग करने की आवश्यकता नहीं है। यह श्रोता को दस्तावेज़ स्तर पर सेट करता है, और फिर तत्वों को सुनने के लिए पृष्ठ को स्क्रैप करता है। इसलिए यह थोड़ा तेज़ होना चाहिए कि आप किस प्रकार के तत्व को सुनना चाहते हैं, जैसे "div.listentome" को ".listentome" के विपरीत। "लिस्टेंटोम" क्लास के लिए हर तत्व की जाँच करने के बजाय , यह केवल divs की जाँच करता है, इस उदाहरण में।

— सीन केंडल

2

@SeanKendle - यह .on()काम नहीं करता है। आप प्रत्यायोजित हैंडलर बनाने के लिए (वैकल्पिक रूप से) इसका उपयोग कर सकते हैं, लेकिन किसी भी तरह से यह "पृष्ठ को परिमार्जन नहीं करता", यह एक श्रोता को उस विशिष्ट तत्व (ओं) से बांधता है, जिस jQuery ऑब्जेक्ट में आप इसे कहते हैं।

— nnnnnn

65

मैंने ON ($) (डॉक्यूमेंट) के साथ इस समस्या का सबसे अच्छा समाधान पाया।

 $(document).on('click', '#yourid', function() { alert("hello"); });

आईडी के लिए नीचे देखें के साथ शुरू:

$(document).on('click', 'div[id^="start"]', function() {
alert ('hello'); });

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

— user5636597
स्रोत

2

आह धन्यवाद, ऊपर मेरे लिए काम नहीं किया, लेकिन यह किया! (शायद कोणीय और मार्ग के साथ कुछ अजीब बातचीत)

— पलक

फ्लिंक की तरह ही, मैंने भी इस समस्या को हल किया। धन्यवाद .. 100 वोट दें ..

— जीटा

3

इसे प्रतिनिधिमंडल कहा जाता है और गतिशील रूप से सम्मिलित या स्थानांतरित सामग्री के लिए आवश्यक है

— mplungjan

यह एक मेरे लिए काम किया! धन्यवाद :)

— अमृत पाल सिंह

20

आपका कोड बिना डॉक्यूमेंट के काम कर सकता है। पहले से ही सुनिश्चित करें कि आपकी स्क्रिप्ट #clicker के बाद की है। इस डेमो को चेकआउट करें: http://jsbin.com/aPAsaZo/1/

तैयार अवधारणा में विचार। यदि आप सुनिश्चित करते हैं कि आपकी स्क्रिप्ट आपके पृष्ठ की नवीनतम चीज़ है या यह प्रभावित तत्व के बाद है, तो यह काम करेगा।

<!DOCTYPE html>
<html>
<head>


<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <script src="https://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
  <a href="#" id="clicker" value="Click Me!" >Click Me</a>
  <script type="text/javascript">

        $("#clicker").click(function () {
            alert("Hello!");
            $(".hide_div").hide();

        });


</script>

</body>
</html>

सूचना: मेंjsbinडेमो कोड में वहाँ के httpसाथ बदलें https, या इस भिन्न डेमो का उपयोग करें

— SaidbakR
स्रोत

11

+1 - अपने जवाब बताता है कि क्यों एक की जरूरत document.ready()कार्य करते हैं।

— केविन

1

यह एक बेहतर उत्तर है क्योंकि सुझाव है कि jquery स्क्रिप्ट एक 'document.ready ()' फ़ंक्शन के भीतर होनी चाहिए, भ्रामक है। हां, यह वहां सुरक्षित है, लेकिन अगर आप मक्खी पर एक jquery फ़ंक्शन के लिए html तत्व सेट करते हैं (जैसे कि क्वेरी को तालिका पंक्ति पर निर्भर करता है कि किस बटन पर क्लिक किया गया है), तो इसे फ़ंक्शन के बाहर / उसके बाद होना चाहिए। मैंने गलती से अपने पॉप-अप ओवरले के लिए लक्ष्य div का नाम बदल दिया और फिर एक स्क्रिप्ट त्रुटि की तलाश में कई निराशाजनक घंटे बिताए। बड़ा सबक सीखा।

— जॉन्होल्डेन

यह एक गलत उत्तर है, क्योंकि JS कोड DOM के हेड में होना चाहिए और इनलाइन नहीं होना चाहिए। तथ्य यह है कि आपने स्क्रिप्ट की त्रुटि की तलाश में कई घंटे बिताए हैं, जेएस समस्या नहीं है, यह आपकी समस्या है कि डॉक्स को ठीक से नहीं पढ़ना है और डिबग टूल का उपयोग करना नहीं जानना है।

— एंड्री शिपिलोव

@AndreyShipilov किसने कहा है कि, बस इस पृष्ठ के स्रोत को देखें और इसके नीचे जाएं, आपको वहां जावास्क्रिप्ट कोड दिखाई देगा।

— सईदबकर

1

@AndreyShipilov - क्या आप जानते हैं कि इस समस्या के निवारण के लिए डीबग टूल का उपयोग कैसे किया जाता है? तो कृपया अपने ज्ञान को दूसरों के साथ साझा करने के बजाय उन्हें अपमानित करें। रचनात्मक और निष्पक्ष होने की कोशिश करें।

— मैट

6

आप के साथ अपने जावास्क्रिप्ट-संहिता रैप करने के लिए है $(document).ready(function(){});देखो इस JSfiddle ।

जेएस कोड:

$(document).ready(function() {

    $("#clicker").click(function () {
        alert("Hello!");
        $(".hide_div").hide();    
    });
});

— काली भेड
स्रोत

5

$(document).ready(function(){अपनी स्क्रिप्ट की शुरुआत में जोड़ने की कोशिश करें , और फिर });। इसके अलावा, क्या इसमें divआईडी ठीक से है, यानी, आईडी के रूप में, क्लास नहीं, आदि?

— tjons
स्रोत

3

सुनिश्चित करें कि आपके बटन पर कुछ भी नहीं है (ऐसा div या trasparent img) जो बटन पर क्लिक करने से रहता है। यह बेवकूफ लगता है, लेकिन कभी-कभी हम सोचते हैं कि jQuery काम नहीं कर रहा है और यह सब सामान और समस्या DOM तत्वों की स्थिति पर है।

— vicgilbcn
स्रोत

या, उदाहरण के लिए, जेड-इंडेक्स!

— एक डैरेन

3

आप $(function(){ // code });उस ब्लॉक का उपयोग कर सकते हैं , जब दस्तावेज़ उस ब्लॉक के अंदर कोड निष्पादित करने के लिए तैयार हो।

$(function(){
    $('#clicker').click(function(){
        alert('hey');
        $('.hide_div').hide();
    });
});

— राकेश कड़दास
स्रोत

2

बस एक त्वरित जाँच करें, यदि आप क्लाइंट-साइड टेंपलेटिंग इंजन जैसे कि हैंडलबार का उपयोग कर रहे हैं, तो आपके js document.ready के बाद लोड हो जाएंगे, इसलिए इवेंट को बाइंड करने के लिए कोई तत्व नहीं होगा, इसलिए या तो ऑनक्लिक हैंडलर का उपयोग करें या शरीर पर इसका उपयोग करें और वर्तमान लक्ष्य के लिए जाँच करें

— अभिनव सिंह
स्रोत

इतना सच है, मैं फ्लास्क / जिन्जा का उपयोग कर रहा हूं और यह तब तक काम नहीं कर रहा है जब तक कि मैं HTML में ऑनक्लिक संपत्ति का उपयोग नहीं करता हूं और वहां से मेरी <स्क्रिप्ट>

— रिच स्टोन