How to trigger multiple event on different html element but inside one jQuery function

Question

I need to trigger 2 events in same one but from different HTML elements. What I mean is that I have search text box and a search button. I need to display search results on keyup inside the search text box OR when the search button is clicked.

I found this answer on stack overflow but it is meant to be used by just one element and several events:

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

Is it possible or should I duplicate my script but change the event for each element ?

What I am using is:

$('#searchBtn').on('click',function() 
{ 
    surfData(); 
});

$('#searchTxt').on('keypress',function() 
{ 
    surfData(); 
});

Give me just 10 minutes I am testing something and I will post all the script for you guys — alim1990
– alim1990, Commented Jun 30, 2017 at 11:15
Just define a new class and assign it to both elements. Use that element for event delegation and you're done. — hallleron
– hallleron, Commented Jun 30, 2017 at 11:16
@hallleron didn't get what you mean, please look at my current script that I will add in a minutes and if I can use different thing — alim1990
– alim1990, Commented Jun 30, 2017 at 11:16

mlhDev · Accepted Answer · 2017-06-30 11:26:56Z

1

You can use this but it will have the side effect of triggering the callback (and your surfData function) when the searchBtn element registers a key press event as well as when the searchTxt element is clicked on (the latter being a very common way a user selects a text box). I believe @hallleron's will have the same problem.

$('#searchBtn, #searchTxt').on('click keypress',function() 
{ 
    surfData(); 
});

To avoid those side effects you'd need to leave the code you have (which is extremely simplified already; below is the only simplier version I could think of)

$('#searchBtn').click(surfData);
$('#searchTxt').keypress(surfData);

answered Jun 30, 2017 at 11:26

mlhDev

2,4352 gold badges23 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

hallleron · Accepted Answer · 2017-06-30 11:20:25Z

1

This is what I meant with "define a class for them":

$('.search_elem').on('keyup click', function(){
  console.log("Event fired!");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="search_elem" type="text" placeholder="search ...">
<button class="search_elem">Start search</button>

answered Jun 30, 2017 at 11:20

hallleron

1,9823 gold badges15 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to trigger multiple event on different html element but inside one jQuery function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related