जब हम दूसरे तरीके से jQuery() Function को Use करते हैं, तब हम jQuery Library में Defined किसी भी Event Type को Pass कि, जाने वाले PlainObject में Property की तरह Use कर सकते हैं। हालांकि jQuery Library में Specified विभिन्न Event Objects को हम आगे विस्तार से समझेंगे, लेकिन फिर भी एक सामान्य उदाहरण के रूप में हम “click” Event को Use कर सकते हैं, जो कि उस समय Trigger होता है, जब हम किसी Element पर Click करते हैं।
मान लीजिए कि हम jQuery के माध्यम से अपने Web Page पर एक Button Create करना चाहते हैं और हम चाहते हैं कि जब हम उस Input Button पर Click करें, तब एक Alert Box Display हो। इस जरूरत को पूरा करने के लिए हम jQuery() Function को निम्नानुसार तरीके से Use कर सकते हैं:
//File Name: AddingEventWithTheElementDynamically.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Adding Event with the Element Dynamically</title>
</head>
<body>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script>
jQuery("<input />",
{
"type": "button",
"value": "Click Me",
click: function () { alert('Hi, I am from dynamic jQuery Codes'); }
}
).appendTo('body');
</script>
</body>
</html>
जैसाकि इस Web Page में Specify किए गए jQuery Code में हम देख सकते हैं कि हमने jQuery() Function के माध्यम से Dynamically Button Type का एक <input> Element Create किया है और दूसरे Argument के रूप में हमने एक PlainObject के रूप में, Newly Create होने वाले <input> Element के साथ “type” व “value” Attributes को Key-Value Pair के रूप में Specify किया है।
साथ ही हमने निम्नानुसार Statement द्वारा एक click Event को भी इस Newly Create होने वाले <input> Element के साथ Dynamically Attach किया है और इस click Event के साथ एक Anonymous Function के रूप में उस JavaScript Code को Specify किया है, जिसे हम तब Run करना चाहते हैं, जब Button को Click किया जाता है:
{
. . .
click: function () { alert(‘Hi, I am from dynamic jQuery Codes’); }
}
जब हम उपरोक्त Web Page को Web Browser में Render करते हैं, तब हमें हमारा Web Page निम्नानुसार दिखाई देता है, जिसमें एक Newly Created Button होता है:
जब हम इस Web Page पर दिखाई देने वाले Button पर Click करते हैं, तो उपरोक्त Code के अनुसार Newly Created <input> Button Element के click Property के साथ Associated Anonymous Function का Code Execute हो जाता है और हमें अगले चित्र में दिखाए अनुसार एक Alert Dialog Box दिखाई देता है:
इस तरह से हम किसी भी Newly Created Element के साथ किसी भी jQuery Library Supported Event को Dynamically Attach कर सकते हैं। साथ ही हम jQuery Library के val(), css(), html(), text(), data(), width(), height() व offset() Methods को भी Newly Created Element के साथ Use कर सकते हैं।
इतना ही नहीं हम jQuery Library में Add कि, गए नए Method on() को भी jQuery() Function के दूसरे Argument के रूप में Specified PlainObject में एक Property के रूप में Specify करते हुए Newly Create होने वाले Element के साथ किसी Event को Attach कर सकते हैं। इस प्रक्रिया को हम निम्न उदाहरण द्वारा बेहतर तरीके से समझ सकते हैं:
//File Name: AddingEventWithTheElementDynamicallyUsingOnMethod.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Adding Event with the Element Dynamically</title>
</head>
<body>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script>
jQuery("<input />",
{
"type": "button",
"value": "Click Me",
on: {
click: function (event) {
alert('Hi, I am from dynamic jQuery Codes');
}
}
}).appendTo('body');
</script>
</body>
</html>
जैसाकि उपरोक्त Web Page के jQuery Code में हम देख सकते हैं कि हमने jQuery() Function के दूसरे Parameter के रूप में एक PlainObject Pass किया है और इस Object के अन्दर on Property के साथ फिर से एक PlainObject को Specify किया है, जो कि एक click Event को Newly Create होने वाले Input Button के साथ Associated कर रहा है, क्योंकि on() Method भी एक Plain Object के रूप में ही Event के नाम को Key के रूप में तथा Event Handle करने वाले Anonymous Function को Value के रूप में Accept करता है। यानी हमने एक PlainObject के अन्दर दूसरे Plain Object की Nesting की है
हम किसी नए Element को Create करके Append कर देने के बाद भी उस Newly Created Element के साथ किसी Event को Attach कर सकते हैं और ऐसा करने के लिए हम jQuery Library के on() Method को निम्न Web Page में लिखे गए Codes के अनुसार Use करते हैं:
//File Name: AddingEventAfterElementCreationAndAppending.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Adding Event After Element Creation And Appending</title>
</head>
<body>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script>
jQuery("<input />",
{
"type": "button",
"value": "Click Me"
}).appendTo('body');
jQuery('input').on({
click: function (event) { alert('Hi, I am from dynamic jQuery Codes'); }
});
</script>
</body>
</html>
इस Web Page में हमने सबसे पहले jQuery() Function का प्रयोग करके Dynamically एक नया <input> Button Create किया है और उसे Body Element के साथ Append किया है और फिर अगले Statement में निम्नानुसार jQuery के on() Method का प्रयोग करके उस Newly Created Element के साथ click Event को Attach किया है:
jQuery('input').on({
click: function (event) { alert('Hi, I am from dynamic jQuery Codes'); }
});
जैसाकि हम देख सकते हैं कि on() Method भी Argument के रूप में एक PlainObject Accept कर रहा है जिसमें Property के रूप में हमने “click” को Specify किया है और उस Property की Value के रूप में हमने एक Anonymous Function Specify किया है। जब हम इस Newly Created Button पर Click करते हैं, तो ये Web Page भी Exactly पिछले वाले Web Page की तरह ही काम करता है और हमें एक Alert Box दिखाई देता है!
जिस तरह से हमने उपरोक्त jQuery Code के अनुसार Newly Created Button Element के साथ एक नया Event Assign किया है, उसी तरह से हम Web Page पर स्थित किसी भी अन्य Element के साथ किसी भी jQuery Event को Attach कर सकते हैं, फिर भले ही वह Element Web Page में पहले से Exist रहा हो या फिर हमने उसे Dynamically Create किया हो।
jQuery में एक ही काम को करने के लिए कई तरीके Provide कि, गए हैं, जिन्हें हम हमारी जरूरत व सुविधा के अनुसार उपयोग में ले सकते हैं। उदाहरण के लिए हमने उपरोक्त Discussion द्वारा दो तरीकों से किसी Element के साथ Click Event को Attach किया है। इसके अलावा भी और तरीके हैं, जिनका प्रयोग करके हम किसी Element के साथ किसी Event को Attach कर सकते हैं, जिनके बारे में हम आगे जानेंगे।
jQuery( callback )
वास्तव में इस तरीके को हम पहले भी Use कर चुके हैं। जब हम किसी एक Function में किसी दूसरे Function को Parameter के रूप में Specify करते हैं और वह दूसरा Function, पहले Function को Call करता है, तो इस Mechanism में Parameter के रूप में Pass होने वाला Function एक प्रकार का Callback Function होता है।
जब हम jQuery() Function को इस तरीके से Use करते हैं, तब हम वास्तव में Internally jQuery(document).ready(); Statement को ही Run कर रहे होते हैं और ready() Method में handler के रूप में हम जिस Function का Reference या Anonymous Function Specify कर रहे होते हैं, वह Handler Function वास्तव में एक प्रकार का Callback Function होता है, क्योंकि उस Function को इस Statement का ready() Method Call कर रहा होता है। जैसे:
//File Name: DOMisReady-AnonymousFunctionAsArgument.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DOM is Ready - Anonymous Function as Argument</title>
</head>
<body>
<script type='text/javascript' src="js/jquery-1.9.1.js"></script>
<script>
jQuery('document').ready(function () {
alert('jQuery ready event fired because DOM is loaded.');
});
</script>
</body>
</html>
इस Web Page के jQuery Code में हमने ready() Method में जो Anonymous Function Specify किया है, वह वास्तव में एक Callback Function है, क्योंकि इस Function को ready() Method द्वारा Call व Execute किया जाता है।
ये Article इस वेबसाईट पर Selling हेतु उपलब्ध EBook jQuery in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी।
jQuery in Hindi | Page:711 | Format: PDF
