jQuery 'यदि .change () या .keyup ()'

Question

JQuery का उपयोग करते हुए मैं एक समारोह को चलाने के लिए जब या तो चाहते हैं .change()या .keyup()उठाए गए हैं।

कुछ इस तरह।

if ( jQuery(':input').change() || jQuery(':input').keyup() )
{
    alert( 'something happened!' );
}

संपादित करें

क्षमा करें, मैं उल्लेख करना भूल गया। दोनों को .change()और .keyup()कुछ वैरिएबल्स को स्कोप में होना चाहिए।

Comments

ईवेंट "सक्रिय" नहीं हैं, वे उठाए गए हैं।

— स्टुपरयूज़र

need some of the variables to be in-scopeजब आप इन ईवेंट हैंडलर को पंजीकृत कर रहे हैं तो क्या आप उस इवेंट या चर का उपयोग कर रहे हैं जिसका आप उपयोग कर रहे हैं? आपको ईवेंट पैरामीटर (आमतौर पर नामित e) में ईवेंट चर मिलते हैं , अन्यथा आपको उन्हें विंडो स्तर या तत्वों पर डेटा रखने की आवश्यकता हो सकती है जब तक कि घटनाओं को उठाया नहीं जाता है, या क्लोजर को देखें।

— स्टुपरयूसर

Answer 1

आप एक स्थान के साथ अलग-अलग करके कई घटनाओं में बंध सकते हैं:

$(":input").on("keyup change", function(e) {
    // do stuff!
})

यहाँ डॉक्स ।

उम्मीद है की वो मदद करदे। चियर्स!

Comments

ध्यान रखें कि यदि कीप (तो, लगभग हमेशा) पर मान बदलता है, तो आंतरिक फ़ंक्शन को दो बार कहा जाता है। @Joshua बर्न्स को संभालने के लिए उत्तर देखें।

— T30

लेकिन यह "कीअप" के लिए 2 बार और "परिवर्तन" के लिए एक को निष्पादित कर रहा है ... क्यों?

— राहुल पवार

.Bind () के बजाय

— .on

Answer 2

यदि आप कभी भी AJAX के माध्यम से पृष्ठ सामग्री या लोडिंग सामग्री को गतिशील रूप से उत्पन्न कर रहे हैं, तो निम्न उदाहरण वास्तव में आपके जाने का तरीका है:

1. यह उस मामले में दोहरे बंधन को रोकता है जहां स्क्रिप्ट एक से अधिक बार लोड की जाती है, जैसे कि AJAX अनुरोध में।
2. यह bodyदस्तावेज़ दस्तावेज़ पर रहता है , इसलिए इस बात की परवाह किए बिना कि क्या तत्व जोड़े, स्थानांतरित किए गए, निकाले गए और फिर से जोड़े गए हैं, bodyचयनकर्ता के मिलान के सभी वंशज उचित बंधन बनाए रखेंगे।

कोड:

// Define the element we wish to bind to.
var bind_to = ':input';

// Prevent double-binding.
$(document.body).off('change', bind_to);

// Bind the event to all body descendants matching the "bind_to" selector.
$(document.body).on('change keyup', bind_to, function(event) {
    alert('something happened!');
});

कृपया ध्यान दें! मैं का इस्तेमाल कर रही हूँ $.on()और $.off()नहीं बल्कि कई कारणों से अन्य तरीकों की तुलना:

1. $.live()और $.die()हटाए गए हैं और jQuery के अधिक हाल के संस्करणों से हटा दिए गए हैं।
2. मुझे या तो एक अलग फ़ंक्शन को परिभाषित करने की आवश्यकता है (इसलिए वैश्विक गुंजाइश को कम करना), और फ़ंक्शन को दोनों पास करना होगा $.change() और $.keyup()अलग से पास करें, या प्रत्येक फ़ंक्शन को समान फ़ंक्शन घोषणा पास करें; डुप्लिकेट तर्क ... जो बिल्कुल अस्वीकार्य है।
3. यदि तत्वों को कभी भी DOM में जोड़ा जाता है, $.bind()तो वे तत्वों को गतिशील रूप से बांधते नहीं हैं क्योंकि वे बनाए जाते हैं। इसलिए यदि आप बाइंड करते हैं :inputऔर फिर DOM में एक इनपुट जोड़ते हैं, तो वह बाइंड विधि नए इनपुट से जुड़ी नहीं होती है। फिर आपको DOM में सभी तत्वों को स्पष्ट रूप से un-bind और फिर re-bind करना होगा (अन्यथा आप बाइंड डुप्लिकेट होने के साथ समाप्त हो जाएंगे)। प्रत्येक बार DOM पर एक इनपुट जोड़े जाने पर इस प्रक्रिया को दोहराना होगा।

Comments

दूसरी पंक्ति क्या करती है?

— वरुण

@ वरुणदास, var bind_to = ':input';एक वैरिएबल बनाता है , जिसे bind_toसभी इनपुट प्रकारों, जैसे input, textareaऔर , को हथियाने के लिए चयनकर्ता कहते हैं button।

— यहोशू

यदि मैं विशिष्ट तत्वों के लिए चाहता हूँ: var bind_to = '#myInput';ajax कॉल वैसे भी दो बार निष्पादित होती है। क्यों???

— पाथ्र्स

@Pathros मुझे एक उदाहरण देखने की जरूरत है, यह धागा जगह नहीं है। मुझे लिंक्डइन या कुछ पर एक संदेश शूट करें

— जोशुआ बर्न्स

Answer 3

यह करो।

$(function(){
    var myFunction = function()
    {
        alert("myFunction called");
    }

    jQuery(':input').change(myFunction).keyup(myFunction);
});

Comments

change()और keyup()लिपटे सेट को वापस करें, ताकि आप उसे चेन कर सकें।

— स्टुपेरयूज़र

तुम, तुम नहीं कर सकते थे। धन्यवाद।

— ब्रेनजेट

श्रृंखला DOM के माध्यम से दूसरी क्वेरी को भी समाप्त करती है।

— कीगनवाटकिन्स

Answer 4

आप परिवर्तन और कीप घटनाओं के लिए सदस्यता ले सकते हैं:

$(function() {
    $(':input').change(myFunction).keyup(myFunction);
});

myFunctionवह कार्य कहां है जिसे आप निष्पादित करना चाहते हैं:

function myFunction() {
    alert( 'something happened!' );
}

Answer 5

ऐसा नहीं है कि घटनाएँ कैसे काम करती हैं। इसके बजाय, आप उन्हें एक फंक्शन देते हैं जब वे होते हैं।

$("input").change(function() {
    alert("Something happened!");
});

Answer 6

एक एकल फ़ंक्शन लिखें और इसे उन दोनों के लिए कॉल करें।

function yourHandler(e){
    alert( 'something happened!' );        
}
jQuery(':input').change(yourHandler).keyup(yourHandler);

परिवर्तन () और कीअप () ईवेंट पंजीकरण फ़ंक्शन मूल सेट लौटाते हैं, इसलिए उन्हें जंजीर बनाया जा सकता है।

Answer 7

कीप इवेंट इनपुट jquery

डेमो के लिए

$(document).ready(function(){  
    $("#tutsmake").keydown(function(){  
        $("#tutsmake").css("background-color", "green");  
    });  
    $("#tutsmake").keyup(function(){  
        $("#tutsmake").css("background-color", "yellow");  
    });  
}); 

<!DOCTYPE html>  
<html>  
<title> jQuery keyup Event Example </title>
<head>  
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>  
<body>  
Fill the Input Box: <input type="text" id="tutsmake">  
</body>  
</html>   

Comments

एकवचन उदाहरण की सराहना करते हैं, भले ही ओपी एक संयुक्त कीप और परिवर्तन समाधान की तलाश कर रहा था ...

— बर्नडॉग