Home/ Questions/Q 9167387
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T15:22:41+00:00

I am Trying to load some html in my document with ajax. The loading

  • 0

I am Trying to load some html in my document with ajax.
The loading is working just file, what i am not able to do is access the loaded html with jquery selectors.

Here is the script :

$(document).ready(function(){
    $.ajax({
          url: 'header.html',
          dataType: 'html',
          success: function(data) {
            $("#header").html(data);
    });
});

Html :

   <body>
    <div id="wrapper">
      <div id="header">
      </div><!--header end-->
    </div>
   </body>

I am trying to access html elements like this :

$('#bigmenu').hide();
$('#mydiv').mouseenter(function(e){
    $('#bigmenu').fadeIn(100);
});

#bigmenu and #mydiv are elements of dynamically loaded html

However it works if i try to access them inside ajax success function.

My question is – How can i access them outside of success function ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ajax is async call and the success event will be first after your function finishes execution. If you access the element before success function is called then it wont be available. This is why dynamically add element on success ‘#bigmenu’ wont be available to hide before success. And hiding element which is not being rendered would fail, so execute hide function after adding to dom in success. Similaly you need to use on to register event for dynamically added elements.

    $(document).mouseenter('mouseenter','#mydiv', function(e){
    $('#bigmenu').hide();
    $('#bigmenu').fadeIn(100);
});
    • 0