AJAX加载不适用于脚本

Question

我正在尝试创建一个网站，在该网站中，文档加载完成后，HTML代码即被加载到div中。 不过，悬停功能不适用于AJAX加载。 请帮忙。

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

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

“ sidebar-main.php”文件：

<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()调用之后的代码将在内容加载之前执行。 这里有两种解决方案：

1. 将您的hover调用放在回调处理程序中，如下所示：

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

2. 将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(); }); 

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