Question

With this javascript I’m printing list of records:

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

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

        setInterval( hide,100 );

    });

</script>

in friend_list.php I’m getting all the records relevant for user and returning it like this:

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

And I’m using this simple script to make overlay:

 <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>

Overlay is working as long as I trigger it with some other id or class than the one used from friend_list.php. But that is the one I need. Any idea why overlay is not working when triggered by class .friend?
Thank you…

Answer 1

Use (live is deprecated)

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

If you are using latest version of jquery then use

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

It’s happening because you are loading content dynamically using

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

so click is not working because those contents were not in the DOM when it was loaded.