jQuery can't trigger change after updating DOM

Question

Hi!

I created some dependent dropdowns in a chain. The one at the top should fire multiple Ajax requests for each dropdowns below it.

I'm using jQuery 1.3.2 with livequery so event handlers should be bind for all reloaded DOM items, yet triggering change doesn't occur for newly updated elements.

What am I doing wrong over here?

function dropDown_CHILD()
{
 jQuery.ajax({
  'async': false,
  'url':...,
  'data':...,
  'cache':false,
  'success':function(html){
   $('#CHILD_unavailable').empty();
   $('#CHILD').replaceWith(html);
  },
  'complete': function(request, status){
   $('#CHILD').trigger('change');
  },
  'error':function(a,b,c){alert('An error occurred, please try again.');}
 });

}
$('#PARENT').livequery('change', dropDown_CHILD);

And the same is generated for CHILD-OF-CHILD as well, so this should invoke its handler as well in complete function, shouldn't it?

Update: Now you can see it on-the-fly.

Thank you very much in advance.

Answer 1

Perhaps "replaceWith" removes the element before inserting the replacement so your event gets unbound:

When an element no longer matches a selector the events Live Query bound to it are unbound. The Live Query can be expired which will no longer bind anymore events and unbind all the events it previously bound. (livequery doc)

Answer 2

I finally solved this case by replacing the plugin with Ajax Listen Plugin, which puts a listener right on document DOM object.

It is now aware of all instances regardless of how DOM updated.