मैं यह पता लगाने की कोशिश कर रहा था कि क्या अंतर है
$(document).on('click', '#id', function(){});
तथा
$('#id').on('click', function(){});
अगर दोनों के बीच कोई अंतर है, और यदि ऐसा है तो क्या अंतर हो सकता है, इस बारे में मुझे कोई जानकारी नहीं मिल पाई है।
क्या कोई समझा सकता है कि क्या कोई अंतर है?
on()। अभी बहुत कुछ करना
जवाबों:
पहला उदाहरण घटना प्रतिनिधिमंडल को दर्शाता है । ईवेंट हैंडलर DOM ट्री (इस मामले में document) से ऊपर एक तत्व से जुड़ा होता है और जब कोई ईवेंट उस तत्व तक पहुंचता है, जो एलिमेंट से मेल खाते तत्व से उत्पन्न होता है , तो उसे निष्पादित किया जाएगा।
यह संभव है क्योंकि अधिकांश DOM इवेंट मूल बिंदु से पेड़ को बुलबुला बनाते हैं। यदि आप #idतत्व पर क्लिक करते हैं , तो एक क्लिक ईवेंट उत्पन्न होता है जो सभी पूर्वजों तत्वों ( साइड नोट) के माध्यम से बबल जाएगा : इससे पहले वास्तव में एक चरण होता है, जिसे 'कैप्चर चरण' कहा जाता है, जब ईवेंट पेड़ से नीचे आता है लक्ष्य )। आप उन पूर्वजों में से किसी पर भी इस घटना को पकड़ सकते हैं।
दूसरा उदाहरण इवेंट हैंडलर को सीधे तत्व से बांधता है। घटना तब भी बुदबुदाएगी (जब तक कि आप उस हैंडलर को रोकते नहीं हैं) लेकिन चूंकि हैंडलर लक्ष्य के लिए बाध्य है, इसलिए आपको इस प्रक्रिया के प्रभाव दिखाई नहीं देंगे।
किसी ईवेंट हैंडलर को सौंपकर, आप यह सुनिश्चित कर सकते हैं कि इसे उन तत्वों के लिए निष्पादित किया जाए जो बाध्यकारी के समय DOM में मौजूद नहीं थे। यदि आपका #idतत्व आपके दूसरे उदाहरण के बाद बनाया गया था, तो आपका हैंडलर कभी भी निष्पादित नहीं करेगा। निष्पादन के समय आप जिस तत्व को जानते हैं, उसे निश्चित रूप से DOM में बांधने से, आप यह सुनिश्चित करते हैं कि आपका हैंडलर वास्तव में किसी चीज़ से जुड़ा होगा और बाद में उचित रूप से निष्पादित किया जा सकता है।
$(document).on('click', $('#id'), function()...मैं $(this)संदर्भ के लिए कैसे उपयोग कर सकता हूं $('#id')? $(this)वर्तमान में संदर्भित है document- जिसे मैं समझता हूं।
निम्नलिखित कोड पर विचार करें
<ul id="myTask">
<li>Coding</li>
<li>Answering</li>
<li>Getting Paid</li>
</ul>
अब, यहाँ अंतर है
// Remove the myTask item when clicked.
$('#myTask').children().click(function () {
$(this).remove()
});
अब, अगर हम फिर से एक myTask जोड़ते हैं तो क्या होगा?
$('#myTask').append('<li>Answer this question on SO</li>');
इस myTask आइटम पर क्लिक करने से यह सूची से नहीं हटेगी, क्योंकि इसमें कोई ईवेंट हैंडलर बंधा हुआ नहीं है। यदि इसके बजाय हम उपयोग करते हैं .on, तो नया आइटम हमारी ओर से बिना किसी अतिरिक्त प्रयास के काम करेगा। यहाँ .on संस्करण कैसा दिखेगा:
$('#myTask').on('click', 'li', function (event) {
$(event.target).remove()
});
सारांश:
के बीच का अंतर .on()और .click()है कि हो सकता है .click()जब साथ जुड़े डोम तत्वों काम नहीं कर सकता .click()घटना बाद में किसी समय गतिशील रूप से जोड़ा जाता है, जबकि .on()स्थितियों में, जहां के साथ जुड़े डोम तत्वों में इस्तेमाल किया जा सकता .on()कॉल बाद में किसी समय गतिशील रूप से उत्पन्न हो सकती है।