फ़ंक्शन एक ऑनक्लिक ईवेंट

Question

में कॉल नहीं कर रहा है, मैं लाइटबॉक्स में प्लेयर खोलने के लिए प्रत्येक यूट्यूब लिंक के अंत में कुछ HTML जोड़ना चाहता हूं। यह मेरा कोड अब तक है:

$(document).ready(function() { 
    var valid_url = new RegExp('youtube\.com\/.*v=([a-zA-Z0-9_-]+)'); 
    var image_data = 'base64 encoded image'; 

    init(); 

    function init() { 
    $('a').each(function() { 
     if (valid_url.test($(this).attr('href'))) { 
     $(this).after(' <img src="' + image_data + '" onclick="open_litebox(\'hi\');" />'); 
     } 
    }); 
    } 

    function open_litebox(param) { 
    alert(param); 
    } 
}); 

यह बिंदु जहां यह यूट्यूब लिंक के बाद कुछ HTML injects, इसलिए की तरह करने के लिए काम करता है:

<img src="base 64 data" onclick="open_litebox('hi')"> 

लेकिन जब मैं इस पर क्लिक करें open_litebox() काम नहीं करेगी बुलाओ त्रुटि कंसोल में देखकर मैं एक त्रुटि देख सकता हूं जो open_litebox is not defined कहता है, लेकिन मैंने इसे परिभाषित किया है।

मैं यहां क्या गलत हो रहा है, इस बारे में बहुत अनजान हूं, क्या कोई मुझे हाथ उधार दे सकता है?

धन्यवाद।

Answer 1

यह एक आम समस्या है जब आप पहली बार jQuery के साथ काम करना शुरू करते हैं। यहां समस्या यह है कि आपने jQuery स्कोप के भीतर फ़ंक्शन को परिभाषित किया है, जिसका अर्थ है कि यह इसे सामान्य फ़ंक्शन की तरह कॉल करके पहुंच योग्य नहीं है। आपकी समस्या का समाधान तो जैसे गुमनाम तैयार समारोह है कि आप लिखित बाहर अपने कार्य परिभाषा स्थानांतरित करने के लिए, यह है:

$(document).ready(function() { 

    // do your stuff here 

}); 

// define your functions here 
function my_func() { 

} 

ओह और मैं अपने चर है कि आप को परिभाषित किया है के लिए एक ही कर रही सुझाव है। उन्हें अपने तैयार फ़ंक्शन के बाहर भी ले जाएं, क्योंकि आपके पास वही समस्याएं होंगी जैसे आपने अपने कार्यों के साथ किया था।

Answer 2

आपका open_litebox फ़ंक्शन किसी अन्य फ़ंक्शन के दायरे में है, इसलिए यह वैश्विक रूप से दिखाई नहीं दे रहा है। इसके बजाय आप क्या कर रहे हैं, .click() प्रयोग करके देखें:

• http://api.jquery.com/click/

इन पंक्तियों के साथ कुछ:

$(this).after(' <img src="' + image_data + '" id='abc' />'); 
$('#abc').click(open_litebox); 

आप इस का उपयोग करते हुए लिंक से प्रत्येक के लिए अलग आईडी जेनरेट करने के लिए होगा रास्ता, इसलिए <img> टैगों में से प्रत्येक को class विशेषता ज्ञात करना है और फिर $('.abc') का उपयोग करके इसे चुनें (यदि कक्षाहै) $('#abc') के बजाय और इसे एक चरण में करें (यानी। आपके $('a').each के बाद एक अलग कॉल के रूप में)।

Answer 3

कारण यह है कि open_litebox()document.ready फ़ंक्शन के अंदर घोषित किया गया है, और इसलिए वैश्विक दायरे से पहुंच योग्य नहीं है।

आप document.ready के बाहर समारोह ले जाते हैं, या, कोड को संशोधित कर सकते हैं jQuery (समारोह सीधे संदर्भ देता है जो) का उपयोग कर onclick हैंडलर संलग्न करने के लिए:

var link = $(' <img src="' + image_data + '" />').click(function() { 
    open_litebox('hi'); 
}); 
$(this).after(link); 

Answer 4

वहाँ एक बहुत neater और अधिक jQuery तरह से आवंटित करने के लिए है क्लिक कार्रवाई।

function init() { 
    $('a').each(function() { 
     if(valid_url.test($(this).attr('href'))){ 
      $(this).click(function() { open_litebox('hi'); }); 
     } 
    }); 
} 

यह अन्य उत्तरों में वर्णित स्कोप समस्या हल करता है। यदि आपको पैरामीटर के साथ open_litebox() को कॉल करने की आवश्यकता है, तो इसे एक अज्ञात फ़ंक्शन के अंदर लपेटें जैसा मैंने किया था, या फिर फ़ंक्शन को कॉल किया जाएगा और फिर वापसी मान क्लिक कार्रवाई पर पास हो जाएगा।अन्यथा, पारित करने के लिए कोई पैरामीटर के साथ, काम सरल है:

$(this).click(open_litebox); 

Answer 5

अन्य उत्तर $(document).ready() के बाहर अपने समस्या का समाधान होगा, लेकिन मैं तर्क को स्पष्ट करना चाहते हैं कि चलती अपने my_func घोषणा में सही हैं, क्योंकि इसमें विशेष रूप से jQuery के साथ कुछ भी नहीं है।

$(document).ready() एक ईवेंट हैंडलर है जिसे आप एक अज्ञात फ़ंक्शन को कॉलबैक के रूप में पास कर रहे हैं जिसे ब्राउज़र को सूचित करता है कि दस्तावेज़ तैयार है।

क्योंकि आपने कॉलबैक फ़ंक्शन के भीतर my_func को परिभाषित किया है, यह वैश्विक दायरे से दिखाई नहीं दे रहा है और इस प्रकार आपके पृष्ठ के img तत्व की onclick संपत्ति से नहीं कहा जा सकता है।

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