javascript - 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())，您需要将事件处理程序委托(delegate)给您的#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>