Question

我正在尝试创建一个网站，当文档加载完成后，HTML代码会被加载到div中。但是，悬停功能不适用于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();
        });
});

＆＃34; sidebar-main.php＆＃34;文件：

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

主PHP文件中的侧栏：

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

Answer 1

在新创建的元素上（请参阅 .load（）），您需要将事件处理程序委派给 #sidebar 祖先。

因此，改变这个：

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

为：

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

演示：

//
// 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>

Answer 2

试试这个

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

Answer 3

所以这不起作用的原因是因为.load()是异步的，这意味着.load()调用之后的代码将在加载内容之前执行。这里有两个解决方案：

将hover调用放入回调处理程序中，如下所示：

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

将hover监听器附加到body标记，但仅在#sidebar .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();
});

在第二个解决方案中，您不必担心负载是异步的，因为侦听器已经附加到正文中。

AJAX Load不适用于脚本

3 个答案: