使用javascript打印标记中的类触发时,覆盖不起作用


Overlay not working when triggered with class from javascript printed tags

使用此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或类以外的其他id或类触发Overlay,它就可以工作。但这正是我需要的。知道为什么叠加在被类触发时不起作用吗?朋友?非常感谢。

使用(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时这些内容不在DOM中。