Asked 3 years ago
24 Jun 2021
Views 570
Harley

Harley posted

jQuery function after an AJAX Content load

jQuery function after an AJAX Content load
dilip

dilip
answered Apr 28 '23 00:00

If you want to run a jQuery function after an AJAX content load, you can use the . ajaxComplete () method in jQuery.

The . ajaxComplete () method is triggered when an AJAX request completes. You can use it to execute a function after the content has been loaded via AJAX.

Here's an example:



<div id="content">
  <!-- This content will be replaced via AJAX -->
</div>

<button id="load-content">Load Content</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  // Listen for the click event on the "Load Content" button
  $('#load-content').click(function() {
    // Make an AJAX request to load content into the #content element
    $.ajax({
      url: '/path/to/content',
      success: function(response) {
        // Replace the content of the #content element with the loaded content
        $('#content').html(response);
      }
    });
  });

  // Execute this function after any AJAX request completes
  $(document).ajaxComplete(function() {
    // Your function here
    // This code will execute after the #content element has been updated via AJAX
    console.log('Content loaded via AJAX');
  });
</script>

In this example, we use the . ajaxComplete () method to execute a function after any AJAX request completes. The function will be executed after the content of the #content element has been updated via AJAX.

You can replace the console.log statement with your own custom code to perform any actions that you want to take after the AJAX content has been loaded.
Post Answer