Binding function to multiple elements with Jquery

Question

I have this small problem with jquery: I need to do something like this:

$(document).ready(function(){
    links = {};
    links.a = "Link a";
    links.b = "Link b";
    links.c = "Link c";

    for (x in links){
        $("#" + x).css("border","1px solid #000");
        $("#" + x).click(function(){
            alert(x);
        });
    }
});
</script>
<div id="a">a</div><br />
<div id="b">b</div><br />
<div id="c">c</div><br />

So that when you click on div#a you will get "Link a" alert, "Link b" on div#b and so on... The problem is that if you run this code, clicking on each element will give alert("Link c") as result, it seems that only the last function variation is assigned to each div...

Of course i can hack it by editing the function to work with div's id and using $(this), but for cursiosity: is there a way to make this cycle work? By creating and assigning a new function to each element in function?

Thx in advance...

Just FYI, it's a bit neater if you chain your jQuery instead of reselecting the selector. Example: $('#'+x).css('border', '1px solid #000').click(fn); — Will Morgan
– Will Morgan, Commented Jul 23, 2009 at 15:52

Big J · Accepted Answer · 2010-01-12 15:00:00Z

33

the nice thing about jQuery is it allows chaining and binding multiple elements just like css.

$(document).ready(function(){

    $('#a,#b,#c')
        .css("border","1px solid #000")
        .bind('click',function(){
            // do something
         });

});

answered Jan 12, 2010 at 15:00

Big J

3313 silver badges2 bronze badges

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

Comments

duckyflip · Accepted Answer · 2009-05-15 15:02:46Z

6

I believe this is what you're after:

$(document).ready(function(){
   links = {
      a:"Link a",
      b:"Link b",
      c:"Link c",
    };

    $.each(links, function(id,text){
      $("#"+id)
       .css("border","1px solid #000")
       .click(function(){ alert(text) })
    })
});

answered May 15, 2009 at 15:02

duckyflip

16.5k5 gold badges36 silver badges35 bronze badges

1 Comment

James Over a year ago

IMO this is the only sound answer other than the accepted one. By using jQuery's each method you are creating a closure on the run; for each time the function is executed. Nice work!

Sam Hasler · Accepted Answer · 2009-05-15 16:36:35Z

4

Use a closure: (a "this" solution is more elegant, but I'm posting this because a now deleted answer had a closure solution that didn't work)

$(document).ready(function(){
    links = {};
    links.a = "Link a";
    links.b = "Link b";
    links.c = "Link c";

    for (var x in links){
        $("#" + x).css("border","1px solid #000");
        $("#" + x).click(
            function(xx){ 
                return function() { alert(xx) };
            }(x)
        );
    };
});

edited May 15, 2009 at 16:36

answered May 15, 2009 at 14:49

Sam Hasler

12.7k10 gold badges74 silver badges106 bronze badges

Comments

Tushar Gupta - curioustushar · Accepted Answer · 2013-07-20 07:22:25Z

Working Demo http://jsfiddle.net/FWcHv/

in you code you are calling jQuery constructor many times i.e $('#a') than $('#b') and $('#c') instead you should call like $('#a,#b,#c')

In my code i have passed through all the id's using $.each and combined them and in the next step i have used $('#a,#b,#c') stored in variable x to make the code optimized and easy.

i have also made a check that if links{} is empty it will not process using variable i

$(document).ready(function () {
    links = {};
    links.a = "Link a";
    links.b = "Link b";
    links.c = "Link c";
    i = 0;
    x = '';
    $.each(links, function (id) {
        x += "#" + id + ',';
        i++;
    });
    if (i > 0) {
        $($(x.slice(0, -1))).css("border", "1px solid #000").click(function () {
            alert($(this).text());
        });
    }
});

Ben Koehler · Accepted Answer · 2009-05-15 14:56:58Z

1

<script type="text/javascript">
$(document).ready(function(){
    $('.links').css("border","1px solid #000");
    $('.links').live('click', function() {
        alert("Link " + $(this).attr('id'));
    });
});
</script>
</head>
<body>
<div id="a" class="links">a</div><br />
<div id="b" class="links">b</div><br />
<div id="c" class="links">c</div><br />

answered May 15, 2009 at 14:56

Ben Koehler

8,6913 gold badges26 silver badges23 bronze badges

Comments

gradbot · Accepted Answer · 2009-05-15 14:35:03Z

0

You need to use "this".

$(document).ready(function(){
    links = {};
    links.a = "Link a";
    links.b = "Link b";
    links.c = "Link c";

    for (var x in links){
        $("#" + x).css("border","1px solid #000");
        $("#" + x).click(function(){
                alert("Link "+this.id+" Alert!");
        });
    }
});

answered May 15, 2009 at 14:35

gradbot

13.9k5 gold badges41 silver badges69 bronze badges

Comments

user434917 · Accepted Answer · 2009-05-15 14:36:56Z

0

<script type="text/javascript">
$(document).ready(function(){
    links = {};
    links.a = "Link a";
    links.b = "Link b";
    links.c = "Link c";

    for (x in links){
        $("#" + x).css("border","1px solid #000").click(function(){
                alert($(this).attr('id'));
        });
    }
});
</script>

</head>

<body>

<div id="a">a</div><br />
<div id="b">b</div><br />
<div id="c">c</div><br />

answered May 15, 2009 at 14:36

user434917

Comments

KyleFarris · Accepted Answer · 2009-05-15 15:17:21Z

0

Seeing as you are hardcoding the elements to be effected anyways, you might as well do it this way as it's likely faster and it's cleaner, IMO:

$("#a,#b,#c").css("border","1px solid #000");
$("#a,#b,#c").click(function(){
    alert("Link "+this.id+" Alert!");
});

Edit: I didn't see the last part of your question... Sorry. You can also do this:

var links = {};
links.a = "Link a";
links.b = "Link b";
links.c = "Link c";

var ids = '';
$.each(function(key,val) {
    ids += "#"+key+","; // extra commas are ignored in jQuery
});

$(ids)
    .css("border","1px solid #000")
    .bind('click',function(){
        alert("Link "+this.id+" Alert!");
    });

edited May 15, 2009 at 15:17

answered May 15, 2009 at 15:05

KyleFarris

17.6k5 gold badges43 silver badges41 bronze badges

Comments

Basic · Accepted Answer · 2011-12-08 15:34:24Z

0

Try using:

$(window).load(function(){

});

:)

edited Dec 8, 2011 at 15:34

Basic

26.9k29 gold badges122 silver badges209 bronze badges

answered Dec 8, 2011 at 15:20

DatPT

1,6852 gold badges11 silver badges3 bronze badges

Collectives™ on Stack Overflow

Binding function to multiple elements with Jquery

9 Answers 9

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related