Events को Programmatically Trigger करना
trigger बिना किसी physical click के एक click event चला सकता है।
In this page:
Syntax
$(selector).trigger("eventName");
$(selector).triggerHandler("eventName");Trigger Click
trigger(click) किसी element के click handlers को programmatically fire करता है, बिल्कुल जैसे किसी user ने इसे physically click किया हो। यह आमतौर पर किसी script या test के अंदर से user interaction simulate करने के लिए इस्तेमाल होता है।
उदाहरण: Trigger Click
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<section id="demo">
<button id="btn">Click</button>
</section>
<div id="output"></div>
<script>
var original = $("#demo").html();
$("#runBtn").click(function() {
$("#btn").on("click", function() { $("#output").text("Clicked!"); });
$("#btn").trigger("click");
});
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
});
</script>
</body>
</html>Trigger Change
trigger(change) से एक change event trigger करना तब उपयोगी है जब आपने JavaScript से किसी form control की value update की हो, क्योंकि सीधे .val() set करना automatically वे handlers fire नहीं करता जो एक real user interaction करता।
उदाहरण: Trigger Change
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<section id="demo">
<input id="name" type="text">
</section>
<div id="output"></div>
<script>
var original = $("#demo").html();
$("#runBtn").click(function() {
$("#name").on("change", function() { $("#output").text("Changed to: " + $(this).val()); });
$("#name").val("Alice").trigger("change");
});
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
});
</script>
</body>
</html>Custom Events को Trigger करना
trigger() पूरी तरह custom event names के साथ भी काम करता है जो आप खुद invent करते हैं, जैसे trigger('cart:updated'), आपके code के अलग-अलग हिस्सों को एक-दूसरे के functions सीधे call किए बिना communicate करने देते हुए।
उदाहरण: Trigger Custom Events
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#runBtn").click(function() {
$(document).on("cart:updated", function() {
$("#output").text("Cart was updated");
});
$(document).trigger("cart:updated");
});
$("#resetBtn").click(function() {
jQuery(document).off();
$("#output").empty();
});
</script>
</body>
</html>Event Data Pass करना
trigger() के दूसरे argument के रूप में एक array pass करना handler को extra data भेजता है, जिसे यह event object के बाद additional arguments के रूप में receive करता है।
उदाहरण: Pass Event Data
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#runBtn").click(function() {
$(document).on("greet", function(event, name) {
$("#output").text("Hello, " + name);
});
$(document).trigger("greet", ["Alice"]);
});
$("#resetBtn").click(function() {
jQuery(document).off();
$("#output").empty();
});
</script>
</body>
</html>Form Events Trigger करना
Form events को programmatically trigger करना automated tests में खासतौर पर उपयोगी है, जहाँ आप बिना किसी असली user interaction के किसी user के form submit करने या एक box check करने को simulate करना चाहते हैं।
उदाहरण: Trigger Form Events
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<section id="demo">
<form id="myForm"><input type="checkbox" id="agree"></form>
</section>
<div id="output"></div>
<script>
var original = $("#demo").html();
$("#runBtn").click(function() {
$("#agree").on("change", function() { $("#output").text("Checkbox toggled: " + $(this).is(":checked")); });
$("#agree").prop("checked", true).trigger("change");
});
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
});
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- किसी handler के attach होने से पहले
.trigger("click")के काम करने की उम्मीद करना, जबकि handler को पहले से registered होना चाहिए (जैसे.on("click", ...)में) वरना कुछ visible नहीं होता। .trigger("submit")इस्तेमाल करना और उसेform.submit()जैसा ही मानना; jQuery submit handlers चलाता है और फिर submit करता है, जबकि एक native call handlers को skip कर देता है।- यह भूल जाना कि
.trigger()किसी element पर bound हर handler को fire करता है, इसलिए इसे उसके अपने handler के अंदर call करना infinite recursion पैदा करता है।
चैप्टर सारांश
- jQuery events mouse, keyboard, form, window, और document actions को respond करते हैं।
- event object, propagation, और bubbling describe करते हैं कि events elements के through कैसे travel करते हैं।
on(),off(), और programmatic triggering control करते हैं कि handlers कब चलते हैं।
🔒
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: