AJAX Load不能与脚本一起工作

I'm trying to create a website where HTML-code gets loaded into a div when document is done loading. Though, the hover function doesn't work with AJAX-load. Please help.

我想创建一个网站，在文件加载完成后HTML-code被加载到div中。不过，hover函数不能使用AJAX-load。请帮助。

$(document).ready(function() {
    $('#sidebar').load('sidebar-main.php');

    $("#sidebar .section").hover(function() {
            $('#sidebar .section .left-mark').show();
        },function(){
            $('#sidebar .section .left-mark').hide();
        });
});

The "sidebar-main.php" file:

“sidebar-main。php文件:

<div class='section' onclick='header()'><div class='left-mark'></div></div>

The sidebar in the main PHP-file:

主要php文件中的侧边栏:

<div id='sidebar'></div>

3 个解决方案

#1

On newly created elements (refer to .load()), you need to delegate the event handler to your #sidebar ancestor.

对于新创建的元素(参见.load()))，您需要将事件处理程序委托给您的#侧栏祖先。

Hence, change this:

因此,改变这种:

$("#sidebar .section").hover(function() {
    $('#sidebar .section .left-mark').show();
},function(){
    $('#sidebar .section .left-mark').hide();
});

to:

$("#sidebar").on('mouseenter', '.section', function() {
    $('#sidebar .section .left-mark').show();
}).on('mouseleave', '.section',function(){
    $('#sidebar .section .left-mark').hide();
});

A demo:

一个演示:

//
// instead on next line, for testing I added the next one
//
//$('#sidebar').load('1.php');
$('#sidebar').append("<div class='section' onclick='header()'>aa<div class='left-mark'>bb</div></div>");

$("#sidebar").on('mouseenter', '.section', function() {
    $('#sidebar .section .left-mark').show();
}).on('mouseleave', '.section',function(){
    $('#sidebar .section .left-mark').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id='sidebar'></div>

#2

try this

试试这个

$('#sidebar').load('sidebar-main.php', bindHoverEvent);
function bindHoverEvent() {
    $("#sidebar .section").hover(function() {
       $('#sidebar .section .left-mark').show();
    }, function(){
        $('#sidebar .section .left-mark').hide();
    });
}

#3

So the reason this isn't working is because .load() is asynchronous, meaning the code following the .load() call will execute before the content is loaded. There's two solutions here:

因此，这不能工作的原因是.load()是异步的，这意味着.load()调用之后的代码将在加载内容之前执行。这里有两种解决方案:

Put your hover call in the callback handler like this:

将鼠标悬停调用放在回调处理器中，如下所示:

$('#sidebar').load('sidebar-main.php', function() {
     $("#sidebar .section").hover(function() {
        $('#sidebar .section .left-mark').show();
     },function(){
        $('#sidebar .section .left-mark').hide();
    });
});

Attach the hover listener to the body tag but only do a call when #sidebar .section is the element hovered. Note that hover is shorthand for mouseenter and mouseleave. Like this:

将鼠标悬停侦听器附加到body标记上，但只在#侧栏.section是元素悬浮时才执行调用。注意，hover是mouseenter和mouseleave的简写。是这样的:
```
$('body').on('mouseenter', '#sidebar .section', function() {
     $('#sidebar .section .left-mark').show();
}).on('mouseleave', '#sidebar .section', function() {
     $('#sidebar .section .left-mark').hide();
});
```

In the second solution you don't have to worry about the load being asynchronous because the listener is already attached to the body.

在第二个解决方案中，您不必担心负载是异步的，因为侦听器已经连接到主体。

#1