Question

EDIT

JQUERY-AJAX REQUEST CODE:

<script type="text/javascript">
$(document).ready(function(){
$(".form").submit( function(e) {
    e.preventDefault();
    var form = $(this);
    var div_add_comment = $(form).parent();
    var div_comments = $(div_add_comment).parent();
    $.ajax({
        type: "POST",
        data: $(form).serialize(),
        url: "includes/comment.php",
        success: function(msg){
            $(div_comments).html(msg);
        }
    });
    return false;
});
});
</script>

JQUERY SHOW ALL – COLLAPSE COMMENTS CODE

<script type="text/javascript">
$(document).ready(function(){
$('.see_all').click(function(){
    var thisItem = $(this);
    thisItem.parent().find('#comment2').slideDown('fast');
    thisItem.parent().find('.collapse').css('display','inline-block');
    thisItem.css('display','none');
    return false;
}); 

$('.collapse').click(function(){
     var thisItem = $(this);
     thisItem.parent().find('#comment2').slideUp('fast');
     thisItem.css('display','none');
     thisItem.parent().find('.see_all').css('display','inline-block');
     return false;
})
})
</script>

JQUERY REMOVE DEFAULT VALUE TEXT UPON FOCUS – TEXTAREA

<script type="text/javascript">
$(document).ready(function(){
var Input = $('textarea[name=comment]');
var default_value = Input.val();

$(Input).focus(function() {
    if($(this).val() == default_value)
    {
         $(this).val("");
    }
}).blur(function(){
    if($(this).val().length == 0)
    {
        $(this).val(default_value);
    }
});
})
</script>

Please let me know if you need anything else, I have the damndest of time copying code and formatting it in these posts.

END EDIT

I am having a weird little problem. I have created a jquery-ajax function to transfer data from a comments section of my page. The page has an instance of this form under each user post. So this page will have X amount of posts with X amount of comments for each posts, like a social network. My ajax request sends, recieves and displays the data perfectly BUT I have two other jquery functions called on elements inside that no longer work after the ajax function returns the html. All the other ones not acted upon by the ajax function STILL WORK. I have the checked and rechecked the response html from the ajax function and it is identical to the html of a standard post-comment instance.

Please let me know what you would like to see or if you have questions.

Thanks, your help is always appreciated!

Answer 1

Be sure to bind the jQuery functions in such a way that the element doesn’t have to exist.

$('ul').on('click', 'li', function(){ /* do something */ });

This will execute on LIs that have been added after the binding of the function.

In your case you would want to bind to the parent of the comments section and target the elements that have the click behavior.

$('.comments')
    .on('click', '.see_all', function(){...})
    .on('click', '.collapse', function(){...})
    .on('focus', 'textarea[name=comment]', function(){...})
    .on('blur', 'textarea[name=comment]', function(){...})