Better way to bind event in jquery

Question

I have a page where I have many controls and then I have a div element and have 10 asp buttons in that div element.

I want to bind mousehover event to only those buttons which are inside the div element.

Currently i m doing it like:

<script src="jquery-1.6.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#MangoPager_btn1").hover(mousehoverfunction);
            $("#MangoPager_btn2").hover(mousehoverfunction);
            $("#MangoPager_btn3").hover(mousehoverfunction);
            $("#MangoPager_btn4").hover(mousehoverfunction);
            $("#MangoPager_btn5").hover(mousehoverfunction);
            $("#MangoPager_btn6").hover(mousehoverfunction);
            $("#MangoPager_btn7").hover(mousehoverfunction);
            $("#MangoPager_btn8").hover(mousehoverfunction);
            $("#MangoPager_btn9").hover(mousehoverfunction);
            $("#MangoPager_btn10").hover(mousehoverfunction);
        }); 
</script>

Is there any way in jquery so that i can declare a list of button ids something like [MangoPager_btn10,MangoPager_btn2,MangoPager_btn3] so that i don't have to do that for every single button id.

I tried with input type but then it's applying the function for all input type objects not for buttons which are in the div elemet.

Any other bettrer way to do it in jquery .... I

Chandu · Accepted Answer · 2011-08-03 13:05:45Z

1

Try this:

$(function(){
  $("[id^='MangoPager_btn']").hover(mousehoverfunction);
})

answered Aug 3, 2011 at 13:05

Chandu

83.2k19 gold badges137 silver badges136 bronze badges

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

Comments

65Fbef05 · Accepted Answer · 2011-08-03 13:06:01Z

1

$('#DivElementId input').hover(mousehoverfunction);

answered Aug 3, 2011 at 13:06

65Fbef05

4,5221 gold badge24 silver badges24 bronze badges

Comments

Robin · Accepted Answer · 2011-08-03 13:06:03Z

1

You can simply give a class to the desired inputs:

$(".mouse-over").hover(mousehoverfunction);

or if you just have a few ids:

$("#MangoPager_btn1, #MangoPager_btn2, #MangoPager_btn3").hover(mousehoverfunction);

answered Aug 3, 2011 at 13:06

Robin

22k10 gold badges66 silver badges87 bronze badges

Comments

Scott Harwell · Accepted Answer · 2011-08-03 13:04:21Z

0

$("#MangoPager button").hover(mousehoverfunction);

Bind the function to the parent div and then all the buttons like this. Assuming MagoPager is the id of the parent div.

or

$("#MangoPager input[type=]").hover(mousehoverfunction);

answered Aug 3, 2011 at 13:04

Scott Harwell

7,4652 gold badges31 silver badges41 bronze badges

Comments

Willem · Accepted Answer · 2011-08-03 13:05:14Z

0

try something like this:

$(".containerclass input[type=submit]").hover(mousehoverfunction);

this will bind the function to all buttons inside a container wit (css)class="containerclass"

answered Aug 3, 2011 at 13:05

Willem

5,4042 gold badges25 silver badges44 bronze badges

Comments

Pehmolelu · Accepted Answer · 2011-08-03 13:09:28Z

0

I recommend using delegate: http://api.jquery.com/delegate/ because it will attach a handler to one or more events for all elements

answered Aug 3, 2011 at 13:09

Pehmolelu

3,5662 gold badges28 silver badges31 bronze badges

Comments

Sergey Ratnikov · Accepted Answer · 2011-08-03 13:28:57Z

0

In this cases I use filters http://api.jquery.com/filter/ with regexp

$("input").filter(function()
{
return /MangoPager_btn/.test(this.id)
}).hover(mousehoverfunction);

answered Aug 3, 2011 at 13:28

Sergey Ratnikov

1,2968 silver badges12 bronze badges

Collectives™ on Stack Overflow

Better way to bind event in jquery

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related