jQuery एक ही फ़ंक्शन को ट्रिगर करने के लिए कई ईवेंट

Question

वहाँ है करने के लिए एक रास्ता है keyup, keypress, blur, और changeघटनाओं को एक पंक्ति में एक ही फ़ंक्शन को कॉल करें या मैं उन्हें अलग से मुझे क्या करना होगा?

मेरे पास समस्या यह है कि मुझे db लुकअप के साथ कुछ डेटा को मान्य करने की आवश्यकता है और यह सुनिश्चित करना चाहते हैं कि सत्यापन किसी भी मामले में छूट न जाए, चाहे वह बॉक्स में टाइप किया गया हो या चिपकाया गया हो।

Answer 1

आप .on()एक फ़ंक्शन को कई ईवेंट में बाँधने के लिए उपयोग कर सकते हैं :

$('#element').on('keyup keypress blur change', function(e) {
    // e.type is the type of event fired
});

या सामान्य फ़ंक्शन के पैरामीटर के रूप में फ़ंक्शन को पास करें:

var myFunction = function() {
   ...
}

$('#element')
    .keyup(myFunction)
    .keypress(myFunction)
    .blur(myFunction)
    .change(myFunction)

Comments

अंतरिक्ष से अलग होने वाली घटनाओं के साथ आप नाम रिक्ति को भी कैसे शामिल करते हैं? .on('keyup.foo keypress.foo blur.foo change.foo', …)या .on('keyup keypress blur change .foo', …)?

— सुकिमा

इसके साथ समस्या यह है कि MyFunction संभवतः कई बार कॉल करेगा, जिसे आप रोकना चाहते हैं।

— एगर

मैं इस फ़ंक्शन में पैरामीटर कैसे पास कर सकता हूं?

— कुशाल्वम

@Esger वैसे भी ऐसा करने के लिए? मोबाइल में, मुझे हमेशा आवश्यकता होती है on('click tap', e => {...})। श्रोता को दो बार ट्रिगर किया जा सकता है, मैं सिर्फ एक बार ट्रिगर करना चाहता हूं, मैं श्रोता फ़ंक्शन में कैसे कोड कर सकता हूं?

— टॉमिशन

@Tomlsion हो सकता है कि किसी क्लासनेम को 'फंक्शन' में 'फंक्शन' के नाम $('#element:not(.busy)').on('keyup keypress blur change', function(e){…});से जोड़ें।

— 21

Answer 2

JQuery 1.7 के रूप में, .on()एक दस्तावेज में इवेंट हैंडलर संलग्न करने के लिए विधि पसंदीदा तरीका है। पहले के संस्करणों के लिए, .bind()विधि का उपयोग किसी ईवेंट हैंडलर को सीधे तत्वों से जोड़ने के लिए किया जाता है।

$(document).on('mouseover mouseout',".brand", function () {
  $(".star").toggleClass("hovered");
})

Comments

यह एक प्रत्यायोजित घटना के लिए किया जाता है, यह काम करेगा, लेकिन यह इसे करने का सबसे सरल तरीका नहीं है, न ही सबसे कुशल।

— बजे बेन टालिडोरोस

इवेंट डेलिगेशन महत्वपूर्ण है, और स्क्रिप्ट लोड / रन होने पर निर्भर करता है (या हो सकता है) की आवश्यकता नहीं हो सकती है, और यदि स्क्रिप्ट लोड / चलाने के समय डोम में तत्व मौजूद हैं।

— random_user_name 16

Answer 3

मैं इवेंट प्रकार प्राप्त करने के लिए एक रास्ता खोज रहा था जब jQuery एक साथ कई घटनाओं के लिए सुनता है, और Google ने मुझे यहां रखा।

तो, उन लोगों के लिए, event.typeमेरा जवाब है:

$('#element').on('keyup keypress blur change', function(event) {
    alert(event.type); // keyup OR keypress OR blur OR change
});

अधिक जानकारी jQuery के डॉक्टर में ।

Answer 4

आप कई घटनाओं के लिए फ़ंक्शन संलग्न करने के लिए बाइंड विधि का उपयोग कर सकते हैं । इस कोड में ईवेंट नाम और हैंडलर फ़ंक्शन को पास करें:

$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

एक अन्य विकल्प jquery एपीआई का समर्थन समर्थन का उपयोग करना है।

Comments

JQuery 1.7 के रूप में, .on () विधि ईवेंट हैंडलर को एक दस्तावेज़ में संलग्न करने के लिए पसंदीदा तरीका है।

— Dzhuneyt

Answer 5

यदि आप एक ही ईवेंट हैंडलर को कई ईवेंट्स से जोड़ते हैं, तो आप अक्सर उनमें से एक से अधिक बार फायरिंग करते हैं (जैसे कि उपयोगकर्ता संपादन के बाद टैब दबाता है;

ऐसा लगता है कि आप वास्तव में क्या चाहते हैं कुछ इस तरह है:

$('#ValidatedInput').keydown(function(evt) {
  // If enter is pressed
  if (evt.keyCode === 13) {
    evt.preventDefault();

    // If changes have been made to the input's value, 
    //  blur() will result in a change event being fired.
    this.blur();
  }
});

$('#ValidatedInput').change(function(evt) {
  var valueToValidate = this.value;

  // Your validation callback/logic here.
});

Answer 6

यह मेरा इसे करने का तरीका है।

$("input[name='title']").on({
    "change keyup": function(e) {
        var slug = $(this).val().split(" ").join("-").toLowerCase();
        $("input[name='slug']").val(slug);
    },
});

Answer 7

आप उस फ़ंक्शन को परिभाषित कर सकते हैं जिसे आप नीचे के रूप में पुन: उपयोग करना चाहते हैं:

var foo = function() {...}

और बाद में आप अपनी वस्तु पर इच्छित कई ईवेंट श्रोताओं को सेट कर सकते हैं, जो नीचे दिखाए गए अनुसार उस स्थान को छोड़कर ('ईवेंट') का उपयोग करके उस फ़ंक्शन को ट्रिगर करते हैं:

$('#selector').on('keyup keypress blur change paste cut', foo);

Comments

आम तौर पर आपको अपना उत्तर स्पष्ट करना चाहिए। बस कोड चिपकाने से ओपी को उनकी समस्या या आपके समाधान को समझने में मदद नहीं मिलती।

— लीगरो

क्या होगा अगर मुझे jquery ईवेंट सब्सक्राइबर फ़ंक्शन (ईवेंट) में पहला तर्क चाहिए? इसका इस्तेमाल कैसे करें?

— डॉ। एक्स

यह ठीक है, आप केवल ईवेंट पैरामीटर के साथ फ़ंक्शन की घोषणा कर सकते हैं और फिर इसे विधि के भीतर से एक्सेस कर सकते हैं। ये घटनाएँ अपने आप में वस्तु को पारित करेंगी। आशा है कि ये आपकी मदद करेगा। var फू = फ़ंक्शन (ईवेंट) {कंसोल.लॉग (ईवेंट); } $ ('# चयनकर्ता')।

— गैलेक्सी

Answer 8

Tatu द्वारा उत्तर यह है कि मैं इसे कैसे सहज रूप से करूंगा, लेकिन मैंने इंटरनेट एक्सप्लोरर में इस तरह की घटनाओं को घोंसले बनाने / बांधने के साथ कुछ समस्याओं का अनुभव किया है, भले ही यह .on()विधि के माध्यम से किया गया हो ।

मैं वास्तव में जो jQuery के संस्करणों के साथ इस समस्या को हल करने में सक्षम नहीं किया गया है। लेकिन मुझे कभी-कभी निम्नलिखित संस्करणों में समस्या दिखाई देती है:

• 2.0.2
• 1.10.1
• 1.6.4
• मोबाइल 1.3.0b1
• मोबाइल 1.4.2
• मोबाइल 1.2.0

मेरा काम पहले समारोह को परिभाषित करने के लिए किया गया है,

function myFunction() {
    ...
}

और फिर व्यक्तिगत रूप से घटनाओं को संभालें

// Call individually due to IE not handling binds properly
$(window).on("scroll", myFunction);
$(window).on("resize", myFunction);

यह सबसे अच्छा समाधान नहीं है, लेकिन यह मेरे लिए काम करता है, और मुझे लगा कि मैं इसे इस मुद्दे पर दूसरों की मदद करने के लिए बाहर रखूंगा।

Answer 9

$("element").on("event1 event2 event..n", function() {
   //execution
});

यह ट्यूटोरियल कई घटनाओं को संभालने के बारे में है।

Answer 10

वहाँ है करने के लिए एक रास्ता है keyup, keypress, blur, और changeघटनाओं को एक पंक्ति में एक ही समारोह कहते हैं?

इसका उपयोग करना संभव है .on(), जो निम्नलिखित संरचना को स्वीकार करता है: .on( events [, selector ] [, data ], handler )इसलिए, आप इस पद्धति में कई ईवेंट पास कर सकते हैं। आपके मामले में इसे इस तरह दिखना चाहिए:

$('#target').on('keyup keypress blur change', function(e) {
    // "e" is an event, you can detect the type of event using "e.type"
});

और यहाँ जीवंत उदाहरण है:

$('#target').on('keyup keypress blur change', function(e) {
  console.log(`"${e.type.toUpperCase()}" event happened`)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="target">

Answer 11

JQuery जैसी बड़ी लाइब्रेरी के बिना अंतर्निहित डोम विधियों के साथ इसे लागू करना सरल है, यदि आप चाहते हैं, तो यह बस कुछ और कोड लेता है - इवेंट नामों की एक सरणी पर पुनरावृति, और प्रत्येक के लिए एक श्रोता जोड़ें:

function validate() {
  // ...
}

const element = document.querySelector('#element');
['keyup', 'keypress', 'blur', 'change'].forEach((eventName) => {
  element.addEventListener(eventName, validate);
});