Why does jQuery not affect content generated after a Ajax call

Question

I'm attempting to hide all li's within a div which is dynamically generated when a use clicks a button. The content of the div is pulled through an Ajax call and I then assign to a div on the page.

For some reason though, any attempt to alter the style with jQuery doesn't have any affect. I notice I also have to apply $(selector).live('click, callback) when attempting to trigger a click.

$.ajax({
 url: "admin.php",
 cache: false,
 data: ({
  'module':'data',
  'action':'actionName',
  'clientname':formatted
 }),
 success: function(data) {
  $('#outputDiv').html(data);
 },
 error: function(XMLHttpRequest, textStatus, errorThrown) {
  if(textStatus == "error") {
   $('#outputDiv').append("Sorry, but there was an error");
  }
 }
});

The 'data' variable returned to the success method is a nested list set e.g. <ul id='tree'><il><a></a></li></ul> etc

What I'm trying to do after the load is hide all children in this case I'd call $(' #tree > li').hide(); A trigger will then occur when the use clicks the anchor tag with:

$('a.viewdetails').click(function() {
$(this).next('ul').toggle();
});

Edit 1

So now I've implemented the solution mentioned below but I can't get the load to function correctly, it doesn't appear to send the url parameters, formatted is generated above and can consist of spaces etc:

var containerDiv = $('div#clientBusinessUnits'),
    liClickHandler = function(e) {
        $('a.viewdetails').click(function() {
            alert('1');
        });
    },
    loadCompleteHandler = function(responseText, textStatus, XMLHttpRequest) {
        console.log(responseText);
        console.log(textStatus);
        $('li', containerDiv).click(liClickHandler);
    };
    containerDiv.load("admin.php?module=data&action&getData&clientname="+formatted, loadCompleteHandler);

Answer 1

It is because the Code is only run once after the script is loaded. If you change you html via an ajax call you need to rerun the code to hide the lis. To accomplish this you can put the code into a function and call this function once the site is loaded and once the site gets updated, you can do this if you call this function from within the callback function of the ajax call.

Answer 2

Any event handlers bound to specific elements - before the elements exist on the page - won't work.

The .live() method helps with that, in that it will let you bind event handlers in advance, to elements that match a selector after elements have been dynamically inserted.

So, without knowing your actual code, a solution for your problem would be to, either

1. Consequently use .live() for your event binding (might imply performance issues on deeply nested pages),
2. Bind your event handlers after you have created your elements dynamically (i.e. bind the handlers in a callback funtion of your ajax method).

Roughly sketched example:

var
  $containerDiv = $('div#container'),
  liClickHandler =
    function(e)
    {
      // hide your li element, or whatever you want to do on click events
    },
  loadCompleteHandler =
    function(responseText, textStatus, XMLHttpRequest)
    {
      $('li', $containerDiv).click(liClickHandler);
    };

$containerDiv
  .load(
    urlToPhpScript,
    loadCompleteHandler
  );