First off, you're adding like elements via ajax, but you're binding the event handler to whichever like element is already part of the dom at any given moment:
$(document).ready(function()
{
//when dom is loaded, #like is selected, and event is bound
$('#like').click(function(){});
});
inside the click handler, you perform an ajax call that may add another like element to the page, but you never bind an event handler to that new element.
You have 2 options: add an event handler for each element that is added to the page dynamically (not so good, bad for performance). OR delegate the event. As an added bonus, you don't need the ID's of the like buttons anymore. You can use the like class to delegate!
$(document).ready(function()
{
$('body').on('click', '.like', function()
{
//handle click on like button here
});
});
This adds an event listener to the body tag, that will call the callback function whenever a click is registered on an element that has the like class.
I'll edit this response, to give you a, purely hypothetical way to ensure unique like id's
Using a closure, you can easily get unique ID's, by exploiting the fact that closure vars can outlive the closure function. But as you can see, just from the verbosity and added complexity of the code below, this approach is not to be recommended. Simply use the class, and leave the ID out. delegation all the way!
$('body').on('click', '.like', (function(count)
{//closure, pass like buttons currently on page
var idNum = 0;
count.each(function()
{
$(this).attr('id', $(this).attr('id') + idNum);
++idNum;//increment
});
return function()
{//this is the actual callback
request.done(function( msg )
{
var chunk = $(msg);//parse HTML response
chunk.find('.like').each(function()
{
$(this).attr('id', ($(this).attr('id') || 'like') + idNum);
++idNum;
});
});
};
}($('.like'))));
Or, if for some reason you don't want to delegate the event:
$('.like').on(function handler()
{//callback should be named, you'll see why
request.done(function( msg )
{
$('.like').off('click', handler);//remove handler
//add msg to DOM
$('.like').on('click', handler);//add handler, now including new DOM elements
});
});
You could (and IMO should) optimize this further, by storing the $.each callback in a closure reference, too:
$('body').on('click', '.like', (function(count)
{//closure, pass like buttons currently on page
var idNum = 0, eachCallback = function()
{
$(this).attr('id', ($(this).attr('id') || 'like') + idNum);
++idNum;//increment
};
count.each(eachCallback);
return function()
{//this is the actual callback
request.done(function( msg )
{
var chunk = $(msg);//parse HTML response
chunk.find('.like').each(eachCallback);
});
};
}($('.like'))));
This way, you avoid creating a callback function object on each click event... but read up on closures to fully understand why this is a better approach, performance wise.
