jquery .load nightmare

Question

after i do .load(somefile.php) the rest of js code want be executed unless it is in .load(somefile.php function(){some code here}). it is also a problem in $.ajax success or complete function. when inside it works and when outside it is not working. this is some small test script.

$(document).ready(function(){
  $("#loadData").click(function(){
    $(this).text("...One Moment Please...");
     $("#container").
       append('<div id="favoriteFiles"></div>').
       load("data.php ul#favoriteFiles", function(){$("#loadData").remove();});
   });
   ///this part is not working when outside of .load function
   /// when inside it is working
   $("li").click(function(){
      $(this).hide();
   });
});
//data.php looks like this
<ul id="favoriteFiles">
<li style="font-weight: bold; list-style-type: none;">My favorite files</li>
<li>Contact.php</li>
<li>second.doc</li>
<li>test.php</li>
<li>a.test.ini</li>
</ul>

so I am asking you guys how this is possible and how can I fix this, because it is stupid to put everything in .success or .complete or .load function.

please, does anyone have some idea? this is just simple example. I need jquery .load on completely else example. but principle is the same.

Answer 1

Yes :) this is working. Also i discover that

.live({function(
 click: function() {} //etc 
)}) 

is also doing a job :)

thanks anyway :)

Answer 2

Something like this maybe?

$(document).ready(function(){
  var onDataLoad = function() {
    $("#loadData").remove();
    $("li").click(function(){
      $(this).hide();
    });
  };

  $("#loadData").click(function(){
    $(this).text("...One Moment Please...");
     $("#container").
       append('<div id="favoriteFiles"></div>').
       load("data.php ul#favoriteFiles", onDataLoad);
   });         
});

Answer 3

If the li's are being added as part of the load event you need to either use the jquery live or deligate functions or attach the events at the time that they are added to the dom. This is because with the standard click event it only attaches the handler to the existing events. Live or delegate will attach the handler to any exiting or future events.

$("li").live("click",function(){
      $(this).hide();
   });