Trouble after using load() function
Hey everyone,
I'm a bit new to JQuery, so I apologize in advance if this is a silly question but...
When I inject external HTML into a page using the load() function, how do I make it so that JQuery can manipulate that new HTML? As an example, I have the following code:
-
$(document).ready(function() {
$('#bodymain')
.ajaxStart(function() {
$(this).hide();
$("#loading").show();
})
.ajaxStop(function() {
$(this).slideToggle();
$("#loading").hide();
});
$(".item").click(function () {
$("#loadarea").html("");
$("#loadarea").load("ajax/index/page.html");
});
$(".listing").click(function () {
$(this).hide();
});
});
So, when an element with the class ".item" is clicked, some external html is loaded into the "#loadarea" div. One of the elements in that external html has a ".listing" class, with which I would like to have a click function. However, it appears that my existing code does not allow for this to work properly.
What am I doing wrong? Thanks!
EDIT: I think I fixed it myself using the .live() function, but if anyone has a better answer I would still appreciate the input. Thanks!