बटन पर क्लिक करें jQuery फ़ंक्शन निष्पादित करें और एंटर/रिटर्न (कुंजी)

मैं एक छोटा सा खोज बॉक्स बनाने की कोशिश कर रहा हूं जो आपको इनपुट फ़ील्ड में दर्ज किए गए कीवर्ड के आधार पर ट्विटर खोजने की अनुमति देता है। हालांकि यह काम करता है, यह केवल तभी काम करता है जब आप सबमिट बटन दबाते हैं। मैं खोज शुरू करने के लिए एंटर या रिटर्न कुंजी दबाकर भी सक्षम होना चाहूंगा। मैंने .sumbit फ़ंक्शन का उपयोग करने का प्रयास किया है और बिना किसी सफलता के फ़ॉर्म तत्व के चारों ओर अपना इनपुट लपेट लिया है। किसी भी अंतर्दृष्टि की सराहना की जाएगी!बटन पर क्लिक करें jQuery फ़ंक्शन निष्पादित करें और एंटर/रिटर्न (कुंजी)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 

<script> 
$(document).ready(function(){ 

function(data) { 

$('#startSearch').click(function(){ 

$('#tweets .results').remove(); 

    var searchTerm = 'http://search.twitter.com/search.json?q=' + $('#twitterSearch').val() + '&callback=?' 

    $.getJSON(searchTerm, function(data) { 
     $.each(data.results, function() { 
      $('<div class="results"></div>') 
      .hide() 
      .append('<a class="userPicLink" href="http://twitter.com/' + this.from_user + '">' + '<img class="userImg" src="' + this.profile_image_url + '">' + '</a>') 
      .append('<span class="userName">' + '<a href="http://twitter.com/' + this.from_user + '">' + this.from_user + '</span>') 
      .append('<span class="userText">' + this.text + '</span>') 
      .append('<time class="textTime">' + relTime(this.created_at) + '</time>') 
      .appendTo('#tweets') 
      .fadeIn(); 

     }); 

    }); 

</script>

<body> 


<label id="searchLabel" for="twitterSearch">Search</label> 
<input type="search" list="searchSugg" id="twitterSearch" placeholder="css3 animation" required aria-required="true"> 
<input id="startSearch" type="submit"> 

<datalist id="searchSugg"> 
<option value="css3 mulitple backgrounds"> 
<option value="html5 video"> 
<option value="responsive web design"> 
<option value="twitter api"> 
</datalist> 

<div id="tweets"> 
</div> 
</body>

स्रोत

2012-06-01 Alvin Jones

आप वास्तव में एक ''

मैंने इस विधि की कोशिश की लेकिन मैं असफल रहा। सबसे पहले मैंने HTML तत्वों को '' में लपेट लिया और मेरे jQuery में मैंने '$ ('# myFormsID') का उपयोग किया। सबमिट करें (फ़ंक्शन() {'। परिणाम कुछ भी प्रतीत नहीं होता था। क्या मैंने इसके बारे में गलत तरीके से जाना है? –

संपादित करें:

Spudley के रूप में सुझाव दिया "का उपयोग करने का मुख्य बिंदु jQuery आप घटना उपयोग करने के लिए HTML मार्कअप में एम्बेडेड ट्रिगर होने को रोकने के लिए है में से एक" इसलिए एक बेहतर समाधान होगा

<script> 
$(document).ready(function(){ 

function(data) { 

$('#twitterSearch').keydown(function(event){  
    if(event.keyCode==13){ 
     $('#startSearch').trigger('click'); 
    } 
}); 

$('#startSearch').click(function(){ 

$('#tweets .results').remove(); 

    var searchTerm = 'http://search.twitter.com/search.json?q=' + $('#twitterSearch').val() + '&callback=?' 

    $.getJSON(searchTerm, function(data) { 
     $.each(data.results, function() { 
      $('<div class="results"></div>') 
      .hide() 
      .append('<a class="userPicLink" href="http://twitter.com/' + this.from_user + '">' + '<img class="userImg" src="' + this.profile_image_url + '">' + '</a>') 
      .append('<span class="userName">' + '<a href="http://twitter.com/' + this.from_user + '">' + this.from_user + '</span>') 
      .append('<span class="userText">' + this.text + '</span>') 
      .append('<time class="textTime">' + relTime(this.created_at) + '</time>') 
      .appendTo('#tweets') 
      .fadeIn(); 

     }); 

    }); 

</script>

या - पिछला प्रस्ताव:

<input type="search" onkeydown="if(event.keyCode==13)$('#startSearch').trigger('click');" list="searchSugg" id="twitterSearch" placeholder="css3 animation" required aria-required="true" >

स्रोत

2012-06-01 22:45:10

आप कर सकते हैं ... लेकिन jQuery का उपयोग करने के मुख्य बिंदुओं में से एक है कि आप HTML मार्कअप में एम्बेडेड ईवेंट ट्रिगर का उपयोग करना बंद कर दें। शायद jQuery की ['keydown() 'ईवेंट का उपयोग करें ] (http://api.jquery.com/keydown/) इसके बजाय? – Spudley

जबकि मुझे वास्तव में सिरिल के समाधान के पीछे विचार पसंद आया, जब मैंने अतिरिक्त फ़ंक्शन को कार्यान्वित करने का प्रयास किया तो यह कार्यक्षमता को पूरी तरह से तोड़ दिया। न तो दृष्टिकोण काम करना प्रतीत होता था। यहाँ कुछ? –

मैं इसे वापस लेता हूं ... समाधान काम करता है! मदद के लिए बहुत बहुत धन्यवाद। –

आप नहीं निकला हुआ js के साथ जगह घटना चाहते हैं तो आप भी इस प्रणाली का उपयोग कर सकते हैं: अगर आप एक बटन सबमिट करें

$("#element").keydown(function(event) { 
if (event.keyCode == 13) { 
    // do stuff 
}

भी

, इस एक विकल्प है, #element पाठ क्षेत्र है जहाँ आप पकड़ चाहते हैं होना चाहिए घटना। यह करने के लिए

संदर्भ: answer

स्रोत

2012-06-01 22:54:14

दोनों कुंजी दबाएँ और माउस क्लिक के लिए श्रोताओं बनाने की कोशिश करें।

function myFunction(e){ 
    if (e.which=='13' || e.type=='click'){ 
     // Run your code here 
    } 
} 
$(document) 
    .on('click', '#startSearch', myFunction) 
    .on('keypress', this, myFunction);

कार्रवाई में http://codepen.io/scottyzen/pen/akWPJd

स्रोत

2016-07-02 00:51:01 Scottyzen

बटन पर क्लिक करें jQuery फ़ंक्शन निष्पादित करें और एंटर/रिटर्न (कुंजी)

उत्तर

संबंधित मुद्दे