Call a jQuery Function with onClick event of Image Button

Question

I have a form in which a table of dynamic data is built with PHP. Within each row is an image that when clicked calls a jQuery function with a click event.

For example, if the image has an id of eventnfo_0, i have a function like this:

$("#eventnfo_0").click(function()

It all works fine as long as I have a defined click event for each row. The problem is, I need to make it dynamic because the number of rows can vary so it's not feasible to build a separate function as depicted above for each row.

My thought is there must be a way to call a jQuery function from an onclick event and pass a row number, but thus far, no dice.

I'm sure it's not an uncommon task, but I've not had any luck with my searches.

Any thoughts are appreciated.

bipen · Accepted Answer · 2013-01-22 05:37:37Z

3

there are many ways tyo do this... call a same class in each img and use it as a selector...

$('.yourClassName').click(function(){alert($(this).attr('id'));});

OR

 $("[id^='eventnfo_']").click(function(){
     alert($(this).attr('id'));
 });

since it is dynamically added this might help..

$(document).on('click',"[id^='eventnfo_']".click(function(){
     alert($(this).attr('id'));
 });

updated

you can use a data attributes for a rownumber and get it from jquery..

say this is your html.

 <img id="eventnfo_0" data-rownumber="1"/>

and jquery

$("[id^='eventnfo_']").click(function(){
     alert($(this).data('rownumber')); //this will alert 1
 });

edited Jan 22, 2013 at 5:37

answered Jan 22, 2013 at 5:20

bipen

36.6k9 gold badges51 silver badges62 bronze badges

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

1 Comment

Lane Over a year ago

Your second suggestion is working, but I need to pass a row number to the function so that I can get the appropriate event id from a hidden field. Thanks much for your help!

Prasanth Bendra · Accepted Answer · 2013-01-22 05:22:26Z

1

$("[id^='eventnfo_']").click(function(){
   alert(this.attr('id'));
});

answered Jan 22, 2013 at 5:22

Prasanth Bendra

33.1k9 gold badges56 silver badges74 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 10:28:40Z

0

If you are looking for dynamic rows you can not use .click, You should go with .on method which is the preferred way.

JS code

$("#table_id").on("click","tr [id^='eventnfo_']", function(){
 //your code goes here.
});

Above is called jQuery event delegation. Read more

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Jan 22, 2013 at 5:46

Techie

45.2k45 gold badges164 silver badges248 bronze badges

Collectives™ on Stack Overflow

Call a jQuery Function with onClick event of Image Button

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related