I've got the following jQuery command to bind the click event when the specific element is dynamically created.
$(".bill-remove-icon").live("click", function(){
$(this).parent().hide('slide',function(){$(this).parent().remove()});
});
But this code gives a firebug error :
TypeError: $(...).live is not a function
What am I doing wrong here? if this code is wrong, pls suggest a better method to bind events to dynamically created elements.
Live is deprecated, you have to use delegation with .on():
$(document).on("click", ".bill-remove-icon", function(){
$(this).parent().hide('slide',function(){$(this).parent().remove()});
});
live() was deprecated in jQuery 1.7, and removed in 1.9. You need to use .on(), which works a little differently than live() did. You can't attach the event handler to the dynamically injected element, you must attach it to an element which exists on page load, and delegate the event to the dynamically added element, like so:
$(document).on('click', '.bill-remove-icon', function() {
...
});
You should change document for something closer to bill-remove-icon, so that the event doesn't bubble right the way up the DOM tree.
Don't use live it is deprecated. Use on
$(".bill-remove-icon").on("click", function(){
$(this).parent().hide('slide',function(){$(this).parent().remove()});
});
