I'm using ajax but is there any option to call function after ajax content fully loaded like $(window).load() or window.onload? When i'm in fresh page everything working fine with $(window).load() or window.onload function because some scripts work after window plete load. But the problem is in ajax and when i click on a link and page is dynamically load contents from another page so we don't need $(window).load() or window.onload function but because some script only work when window loaded or content fully loaded so how to call function after ajax content fully loaded like $(window).load() or window.onload ?

function windowload() {
      //Some functions works only after window load
 };



$(function() {

   $(window).on('load', windowload);

        $(document).on('click', '.pagination a', function(event) {
                        event.preventDefault();
                        var $this = this.href;

                        $.ajax({
                        url: '' + $this + '',
                        dataType: 'html',
                        success: function(html) {
                        var div = $('#style', $(html));
                        $('#style').html(div);

                        //call windowload but not working
                         windowload();

                        //Also tried this but not working
                        $('#style').on('load', function(){
                            windowload();
                           //Some functions work only after ajax content fully loaded 

                             });

                      });
               }); 

Edit : I need a function after ajax content fully loaded not after ajax request plete.

I'm using ajax but is there any option to call function after ajax content fully loaded like $(window).load() or window.onload? When i'm in fresh page everything working fine with $(window).load() or window.onload function because some scripts work after window plete load. But the problem is in ajax and when i click on a link and page is dynamically load contents from another page so we don't need $(window).load() or window.onload function but because some script only work when window loaded or content fully loaded so how to call function after ajax content fully loaded like $(window).load() or window.onload ?

function windowload() {
      //Some functions works only after window load
 };



$(function() {

   $(window).on('load', windowload);

        $(document).on('click', '.pagination a', function(event) {
                        event.preventDefault();
                        var $this = this.href;

                        $.ajax({
                        url: '' + $this + '',
                        dataType: 'html',
                        success: function(html) {
                        var div = $('#style', $(html));
                        $('#style').html(div);

                        //call windowload but not working
                         windowload();

                        //Also tried this but not working
                        $('#style').on('load', function(){
                            windowload();
                           //Some functions work only after ajax content fully loaded 

                             });

                      });
               }); 

Edit : I need a function after ajax content fully loaded not after ajax request plete.

• javascript
• jquery
• ajax

• you need to read more about load and ready events, start here - > api.jquery./load-event. P.S downvote for not making sense – Vitaliy Terziev Commented Jul 3, 2016 at 15:09
• Sorry i don't want .load() – Debar Commented Jul 3, 2016 at 15:11
• hm or you want code which needs to run after the ajax is finished but not before the load event, in this case Rory's suggestion is not going to work, you can just replace this $(function() { with $(window).load( and execute your ajax after the load event (upvote :) if you describe your problem more clearly ) – Vitaliy Terziev Commented Jul 3, 2016 at 15:18
• See updated question. – Debar Commented Jul 3, 2016 at 15:32
• OK, upvoted, well did you try my suggestion then, it shold work just your ajax will hold a little bit longer and then all code will be executed once the event fires – Vitaliy Terziev Commented Jul 3, 2016 at 15:39

4 Answers 4

I have been trying to find the solution to this exact same problem for hours. What worked for me was

$(document).ajaxComplete()

I put my code in there and when Ajax was plete and the content of the div fully reloaded, I added the style I wanted to add. Hope this helps someone. Calling the method from ajax success won't work.

If you need to call a single function at multiple points in the pages lifecycle (as you describe above, where the logic is needed on both page load and also when an AJAX request pletes), then you can extract the required logic to its own function to be called as needed. Try this:

function htmlLoaded() {
    // Some functions work only after window load 
}

$(window).load(htmlLoaded); // called on page load

$(function() {
    $(document).on('click', '.pagination a', function(event) {
        event.preventDefault();
        $.ajax({
            url: this.href,
            dataType: 'html',
            success: function(html) {
                var styleHtml = $(html).find('#style');
                $('#style').html(styleHtml);
                htmlLoaded(); // called after the AJAX request pletes successfully
            }); 
        });
    });
});

Also note that I made a couple of amendments to improve the logic in your JS code.

Try this:

$("#Style").ready(function(){
   console.log('Style is fully loaded.');
   windowload();
});

Hope this will help.

When you call a function you must use the () symbol like windowload(). Here is the fixed, well-indented code : (I removed the empty quotes, useless here)

function windowload() {
  //Some functions works only after window load
};

$(function() {
  $(window).on('load', windowload);

  $(document).on('click', '.pagination a', function(event) {
    event.preventDefault();
    var $this = this.href;

    $.ajax({
      url: $this, // Removed the empty quotes which are useless here
      dataType: 'html',
      success: function(html) {
        var div = $('#style', $(html));
        $('#style').html(div.html());
        $('#style').ready(windowload);
      }
    });
  });
});

By adding a new script tag which will run the windowload() function, we solve the problem. Because when this script is runned all HTML content placed before this tag has been loaded.