Bind function to the event "onclick" of the elements of an array of buttons

Question

Preamble: I'm Italian, sorry for my bad English.

This is my problem:

I want to assign a function to a set of buttons.

I need to send a parameter to the function.

this is the code that I've tried:

function test(atxt) {
    var buttons = $('.tblButton');

    for (var i = 0; i < buttons.length; i++) {
        buttons[i].onClick(sayHello(atxt));
    }
}

function sayHello(txt){alert('hello' + txt)};

...getting the following error:

Uncaught TypeError: Object #<HTMLButtonElement> has no method 'onClick'

can you tell me where I went wrong and how can I fix it?

EDIT: I need iteration because I need the 'id of the button as a parameter of the function so i need to do buttons[i].onClick(sayHello(buttons[i].id))

I need iteration because I need the 'id of the button as a parameter of the function so i need to do buttons[i].onClick(sayHello(buttons[i].id)) — benVG
– benVG, Commented Dec 14, 2012 at 17:26
But you could just use sayHello($(this).attr('id')) - inside the above code — Tom Walters
– Tom Walters, Commented Dec 14, 2012 at 17:27
you mean something like: $('.tblButton').onClick(function(){sayHello($(this).attr('id'))} ) ?? — benVG
– benVG, Commented Dec 14, 2012 at 17:33
$('.tblButton').on('click', function(){ sayHello($(this).attr('id')); }); — Tom Walters
– Tom Walters, Commented Dec 14, 2012 at 17:40

Sushanth -- · Accepted Answer · 2012-12-14 17:29:45Z

5

buttons[i].onClick(sayHello(atxt));

Supposed to be

$(buttons[i]).on('click', function() { sayHello(atxt) });

If you want to get the current button id then I think you are looking for this..

for (var i = 0; i < buttons.length; i++) {
     $(buttons[i]).on('click', function() { sayHello(this.id) });
}

edited Dec 14, 2012 at 17:29

answered Dec 14, 2012 at 17:10

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

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

3 Comments

John Dvorak Over a year ago

buttons[i] is a DOM node, not a jQuery object.

Sushanth -- Over a year ago

@JanDvorak .. Over looked that .. Thanks :)

John Dvorak Over a year ago

Note that "attaching to a class" indicates a "live" behavior, which is not the case here.

Jai · Accepted Answer · 2012-12-14 17:40:52Z

1

If you want to iterate through all of the buttons then you have to do that with .each() handler of the jquery:

$(function(){
  $(".tblButton").each(function () {
    $(this).click(function(){
       alert($(this).attr('id'));
    }); 
  });
});

checkout the jsbin: http://jsbin.com/usideg/1/edit

answered Dec 14, 2012 at 17:40

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Comments

Mark Schultheiss · Accepted Answer · 2012-12-14 17:39:06Z

0

Would this not work for your example: Do you have another reason for the iteration?

function test(atxt) {
    $('.tblButton').on('click',function(){sayHello(atxt);});
}

function sayHello(txt){alert('hello' + txt)};

OR optionally if the elements are static and present:

function test(atxt) {
    $('.tblButton').click(function(){sayHello(atxt);});
}

function sayHello(txt){alert('hello' + txt)};

Alternate approach: just change to this style:

var txt = "fred";
var atext = "hello" + txt;

function sayHello(atext) {
    alert(atext);
}
$('.tblButton').on('click', function() {
    sayHello(atext);
});
//below here just to demonstrate
$('.tblButton').eq(0).click();//fires with the fred
txt = "Johnny";// new text
atext = 'hello' + txt;
$('.tblButton').eq(1).click();//fires the Johnny

see it working here: http://jsfiddle.net/dFBMm/

SO based on your note: this markup and code:

<button class="tblButton" id="Ruth">Hi</button>
<button class="tblButton" id="Betty">Hi again</button>

$('.tblButton').on('click', function() {
    alert("Hello "+$(this).attr("id"));
});
$('.tblButton').eq(0).click();//fires with the Ruth
$('.tblButton').eq(1).click();//fires the Betty

http://jsfiddle.net/dFBMm/1/

edited Dec 14, 2012 at 17:39

answered Dec 14, 2012 at 17:16

Mark Schultheiss

34.3k13 gold badges75 silver badges117 bronze badges

2 Comments

benVG Over a year ago

I need iteration because I need the 'id of the button as a parameter of the function so i need to do buttons[i].onClick(sayHello(buttons[i].id))

ianbarker Over a year ago

you don't need that you can use $(this).attr('id') or similar

Collectives™ on Stack Overflow

Bind function to the event "onclick" of the elements of an array of buttons

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related