php - 使用 javascript 打印标签中的类触发时，覆盖不起作用

Question

使用此 javascript，我正在打印记录列表:

<script type="text/javascript">
    $(document).ready(function(){

        function hide(){
        $('#friend_list').fadeIn(100);
        $('#friend_list').load("friend_list.php");
        };

        setInterval( hide,100 );

    });

</script>

在friend_list.php中，我获取与用户相关的所有记录并像这样返回:

echo "<div class='friend' id='friend'>" . $a["username"] . "<input type='hidden' value='$id'/>" . "</div>";

我正在使用这个简单的脚本来制作叠加层:

 <script type="text/javascript">
 $(document).ready(function(){
function overlayerOn(){
    $('#overlayer').fadeIn(800);
}

function overlayerOff(){
    $('#overlayer').fadeOut(800);
};

$('#board').click(function(e){e.stopPropagation();});

$('.friend').click(function(e){
    e.preventDefault();
    overlayerOn();
    var $br = $('#board');
    $br.css('display', 'block');
    });

$('#overlayer').click(function(e){
    overlayerOff();});
});
</script>

只要我用不同于friend_list.php中使用的其他ID或类触发覆盖，它就可以工作。但这正是我需要的。知道为什么覆盖在由 .friend 类触发时不起作用吗？ 谢谢...

Answer 1

使用(live已弃用)

$('.friend').live('click', function(e){
    // your code
});

如果您使用的是最新版本的 jquery，则使用

$('body').on('click', 'div.friend' , function(e){
    // your code
});

发生这种情况是因为您正在使用动态加载内容

$('#friend_list').load("friend_list.php");

因此单击不起作用，因为加载时这些内容不在 DOM 中。