CODEWITHSUNDEEP
jqueryajaxtriggers
pestaa
pestaa

Reputation: 4749

jQuery can't trigger change after updating DOM

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.

Upvotes: 0

Views: 2257

Answers (2)

pestaa
pestaa

Reputation: 4749

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.

Upvotes: 0

user180100
user180100

Reputation:

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)

Upvotes: 2

Related Questions