Click not working after ajax content has loaded

Question

How can I make live('click',function()" work after an ajax call and returning content with html(data)? After 4 hrs of searching I think I'd better ask because I am getting nowhere.

This part is working:

$.ajax({
    type: "POST",
    url: "loadAlbum.php",
    data: dataString,
    success: function(data){
        $(".loader").html(data, {}, function(){ 
        //content is loaded now
        //need to get the function below working in this part of the content
        }); 
    },
    error : function(data) { } 
    });
});

And I need this one to work in the ajax above:

$('.divName as inside loader').live('click',function(){  

alert('gotClicked');

    var vidItem = $(this).attr('data');
    vidItem = vidItem.split('-'); var bookID = vidItem[0]; var state = vidItem[1];
    var dataString = 'bookID='+ bookID + '&state=' + state;

alert(dataString); 

});

Answer 1

.live() is deprecated. Use .on() instead.

$("body").on("click", "divClass", function(event){
    alert('gotClicked');
});

Also, just to make sure you're calling the div correctly, it shouldn't be the div name it should be the div class when calling it in that fashion.

Also, using live() and on() needs to be applied at a parent level that exists at the document load. If this divName you're using didn't exist when the page loaded itself it can't be bound to. However, if you bind to the body element, then it'll always look for the div when the click occurs.