0

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

这是脚本：

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

网页：

   <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 的元素

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

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

4

3 回答 3

1

Ajax 被async调用，成功事件将在您的函数完成执行后首先出现。如果您在调用成功函数之前访问该元素，那么它将不可用。这就是为什么在成功“#bigmenu”上动态添加元素在成功之前无法隐藏的原因。并且隐藏没有被渲染的元素会失败，所以在成功添加到dom之后执行隐藏功能。类似地，您需要使用on来为动态添加的元素注册事件。

$(document).mouseenter('mouseenter','#mydiv', function(e){
    $('#bigmenu').hide();
    $('#bigmenu').fadeIn(100);
});
于 2013-01-19T17:19:24.827 回答
0 
$(document).on('mouseenter', '#mydiv', function(e){
    $('#bigmenu').hide().fadeIn(100);
});

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

于 2013-01-19T17:17:51.583 回答
0

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

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

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

您不必这样做hide()——您只需使用on()以JavaScript 事件为中心的功能。

于 2013-01-19T17:18:02.730 回答