Question

After an AJAX call i’m getting an HTML:

This is a new Title <a href="javascript:void(0);" id="goBackLink"><img src="../images/go-back.png" /></a>

i wrote this code:

$('#goBackLink').click(function() {
            $('.msgBoxConverstion').slideUp('slow', function (){
                $('.msgBoxContent').slideDown('slow'); 
            });
        });

but from some reason it doesn’t work.
before you say anything, yes i double checked the classes name and they are exists.

this is the full code:

    <script type="text/javascript">
    $(document).ready(function () {
        $('#messagesLink').click(function() {
            $('#wrapper').fadeTo('slow', 0.5, function (){
                $('#messageBox').fadeIn();
            });
        });

        $('#exitLink').click(function() {
            $('#messageBox').fadeOut(function (){
                $('#wrapper').fadeTo('slow', 1); 
            });
        });

        $('#goBackLink').click(function() {
            $('.msgBoxConverstion').slideUp('slow', function (){
                $('.msgBoxContent').slideDown('slow'); 
            });
        });

        $('.msgBoxContent p').click(function (){
            $.ajax({
                type: 'POST',
                url: '../core/ajax_handler.php',
                data: ({
                    ajaxHook: 'getMessageReplies',
                    messageID: $(this).attr('class')
                }),
                success: function ( messageLayout ){
                    var message = $.parseJSON( messageLayout );
                    $('.msgBoxContent').slideUp('slow', function() {
                        $('.msgBoxConverstion').html( message.replies ).slideDown('slow');
                    });
                    $('.msgBoxHeader').html( message.title );
                }
            });
        });
    });
</script>
<div id="messageBox">
    <div class="msgBoxHeader">
        <a href="javascript:void(0);" id="exitLink"><img src="../images/cross.png" /></a>
        [#-LANG::X_MSGS_FROM_X-#]
    </div>
    <div class="msgBoxContent">
        [#-DATA::GET_USER_MESSAGES-#]
    </div>
    <div class="msgBoxConverstion">

    </div>
    <div class="msgBoxBottom"></div>
</div>

Thanks again 🙂

Answer 1

Statically written click handlers using click or bind will not pick up dynamically added content. You’ll need to use on to accomplish this.

$(document).on("click", '#goBackLink', function() {
     $('.msgBoxConverstion').slideUp('slow', function (){
          $('.msgBoxContent').slideDown('slow'); 
     });
});

Note that this will listen for all clicks that occur anywhere on your page. Ideally, if you’re guaranteed that this goBackLink anchor will always be added inside of some container, say, a div named foo, then just listen for clicks on foo

$('#foo').on("click", '#goBackLink', function() {
     $('.msgBoxConverstion').slideUp('slow', function (){
           $('.msgBoxContent').slideDown('slow'); 
     });
});