CODEWITHSUNDEEP
javascriptjqueryajax
Jürgen Paul
Jürgen Paul

Reputation: 15037

ajax-loaded script not functioning

This code below is loaded via ajax:

<div class="main">
    //some content
</div>    
<div class="advanced">
    //some content
</div>
<div class="other">
    //some content
</div>
<div class="pass">
    //some content
</div>
<script>$('.advanced,.other,.pass').hide();</script>

They hide fine when loaded normally, but when loaded via ajax it doesn't work anymore. Why is it so? I'm not really sure if $.on() would really help here.

Upvotes: 0

Views: 62

Answers (2)

Joseph
Joseph

Reputation: 119877

According to jQuery

any embedded JavaScript inside the retrieved data is executed before the HTML is returned as a string.

this could mean that your script executed first, before you managed to do anything with it.

Upvotes: 0

Brian Scott
Brian Scott

Reputation: 9381

If the example above is loaded via jQuery ajax, why not just call the

$('.advanced,.other,.pass').hide();

upon completion of the ajax request?

For example:

$.ajax({
    url: "Your AJAX URL",
    dataType: 'html',
    type: "POST",
    success: function (json) {
        // Add you elements to the DOM
    },
    complete: function () {
        $('.advanced,.other,.pass').hide();
    }
});

Upvotes: 1

Related Questions