ansaurus

Question

Binding function to multiple elements with Jquery

Answer 1

A:

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!");
        });
    }
});

gradbot 2009-05-15 14:35:03

Answer 2

A:

<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 />

Marwan Aouida 2009-05-15 14:36:56

Answer 3

+1 A:

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)
        );
    };
});

Sam Hasler 2009-05-15 14:49:58

Thanks, this was what I was looking for :)

Alekc 2009-05-15 15:03:20

Answer 4

A:

<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 />

Ben Koehler 2009-05-15 14:56:58

Answer 5

+3 A:

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) })
    })
});

duckyflip 2009-05-15 15:02:46

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!

J-P 2009-05-15 15:43:22

Answer 6

A:

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!");
    });

KyleFarris 2009-05-15 15:05:19

Answer 7

+1 A:

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
         });

});

Big J 2010-01-12 15:00:00

ansaurus

tags:

views:

answers:

Binding function to multiple elements with Jquery

related questions