Question

having a slight problem here. I have a post stream on my site, each post has buttons that execute different actions that are setup in my $(document).ready() now, to add posts I make an AJAX call that returns the html for the new post element, but the actions in the my previous $(document).ready() do not apply to this new element, and adding it in a $(document).ready() for the element causes the buttons from the already posted elements to be duplicated.

Any idea how I can get around this?

Answer 1

The elements that added after documnet ready event don’t accept binding events (you call it ations). You may use .click() or .hover() or .bind('click', function(){}) and neither works. You can use jQuery .live() or .delegate()

Using delegate is much better because when you use live for click (for example) it means you’r listening to any click happening on your document and determining if it’s that click you where looking for or not? But with delegate you limit the clicks that computer process to find your click.

$('.myinput').live('click', function(){
     // do something if a click happened and it was on my input
 })

$('.myDiv').delegate('.myinput', 'click', function(){ 
     // do something if a click happened in my div and it was on my input 
})