Question

我正在尝试使用ajax在我的文档中加载一些html。加载只是文件，我无法做的是使用jquery选择器访问加载的html。

这是脚本：

$(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>

我正在尝试访问这样的html元素：

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

#bigmenu和#mydiv是动态加载的html

的元素

但是，如果我尝试在ajax success函数内访问它们，它会起作用。

我的问题是 - 如何在成功功能之外访问它们？

Answer 1

Ajax是async调用，成功事件将在函数完成执行后首先发生。如果在调用成功函数之前访问该元素，则它将不可用。这就是为什么动态添加元素成功'#bigmenu'在成功之前无法隐藏的原因。隐藏未呈现的元素会失败，因此在成功添加到dom后执行hide函数。类似地，您需要使用on为动态添加的元素注册事件。

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

Answer 2

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

您必须将该事件委托给动态加载的HTML元素。你必须隐藏（）div才能在其上播放动画。

Answer 3

对于已更改DOM的动态加载元素，您需要使用on()方法：

$('#bigmenu').hide();

$('#mydiv').on('mouseenter', function() {
    $('#bigmenu').fadeIn(100);
});

您不必对hide()执行此操作 - 您只需使用on()功能集中在JavaScript events。

访问动态加载的html元素

3 个答案: