Наложение не работает при запуске с классом из тегов, напечатанных на 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.Но это то, что мне нужно.Есть идеи, почему оверлей не работает, когда срабатывает класс .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, когда оно было загружено.