JQuery .load() makes content not clickable after load

Question

I have a page in which I have a div. The content from that div is being populated by an includes page, and that includes page is making a call to a database to retrieve content

Answer 1

change this line

$(".newtask").click(function(){

to

$(document).on(".newtask","click",function(){

or use delegate

$(document).delegate("click",".newtask",function(){

reason is the dynamically added elements do not get themselves attached to event handlers use on if you are using jQuery 1.7+ else use delegate

Answer 2

The jQuery .click event is not a live event, so it will only make items it has been assigned to clickable. Once those items are refreshed, removed or new items come in, the refreshed items won't have the click event and new items won't have the click event.

You'll want to use the jQuery .on event, which is the replacement for the .live event. That way when the contents refresh, they'll still have a click event attached.

The other option is to assign the click event whenever the content refreshes.

Answer 3

it will work with this

$(document).on("click",".newtask",function(){

or

$(document).delegate(".newtask","click",function(){