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

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 function 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
  );