0

On my site it will have product tiles, each tile will have a button in it, tiles will be loaded by ajax call according to availability, i am using following function to initialize function with the div's. Here "add_+uid" is the id for the button

$('#add_'+uid).bind("click",addFunction);
function addFunction(){

...
}

I found that the code above will work only on page load, Can i use it like and is this a solution for ajax type scenario?

$('#add_'+uid).click(addFunction);

If this will not work any suggestion about this scenario?

user2408578
  • 464
  • 1
  • 4
  • 13
  • 3
    I'm not 100% sure what you are asking for. Binding an event handler always "works" when the element exists. So yes, when you added new elements in an Ajax response callback and then call `$('#add_'+uid).click(addFunction);`, it will "work". – Felix Kling Aug 22 '13 at 09:50
  • 1
    Read about event delegation [jQuery's .on()](http://api.jquery.com/on/) and I recommend using a class istead of binding the event to each id separately – Yotam Omer Aug 22 '13 at 09:50
  • If `'#add_'+uid` is not in the DOM then you need to use `on` function or `delegate` jQuery method. – jcubic Aug 22 '13 at 09:51
  • thanks for all your support ,@Felix Kling i am using this one only $('#add_'+uid).click(addFunction); and found that its working..hope it will work for all tiles...as tomarrow i may have 100 tiles on a page – user2408578 Aug 22 '13 at 10:36

2 Answers2

3

The jQuery on method can be called for a parent element.
As long as the parent element exists it will catch all events for the given selector.

http://api.jquery.com/on/

.on( events [, selector ] [, data ], handler(eventObject) )

selector:
A selector string to filter the descendants of the selected elements that trigger the event.

$('body').on('click', '#add_'+uid, function(){

});

You could also bind the listener to all elements starting with an id of add_ :

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

Demo: jsFiddle

jantimon
  • 36,840
  • 23
  • 122
  • 185
  • You should clarify that you're using event delegation, while OP isn't. – Johan Aug 22 '13 at 09:52
  • @jantimon your solution is correct but it will work when we do same functionality based on where we click for e.g. we simply put alert and it will work....But i am having dynamic data to be fetched like image,url of that tile,product id,product name,product desc,prd idf_id,...etc,In which case i will have to pass them dynamically... – user2408578 Aug 22 '13 at 10:40
  • You can use `this` inside the event handler see my updated answer. It will always alert the Id of the clicked element. – jantimon Aug 22 '13 at 14:15
2

Use

$(document).on("click", '#add_'+uid, addFunction);
function addFunction(){
    ...
}

Instead of document you can also use a static container on your page.

Raidri
  • 17,258
  • 9
  • 62
  • 65
  • Yes this is alternate solution for that but i need to be sure that it will work even when my tiles are getting loaded by ajax call dynamically when user is scrolling down to the page.... – user2408578 Aug 22 '13 at 10:33