jQuery not responding to AJAX loaded content

Question

I have a News Feed page Where I load in 8 items when the page is loaded and when the user scroll down to the bottom of the page it will load 8 more items. Loading the items is not issue. In the page I have a jquery script that submits the form if the user presses enter and goes to the next line if the user press shift+enter in the comment box. It works for the first 8 items but doesn't work for the items loaded in by AJAX.

What should I do to get the jquery functions to work for the items that are loaded through AJAX?

Here is the feed.php page:

<?php
    require 'includes/master.php';
    include 'includes/header.php';
?>


<div class="container">
    <p>
        <!--UPDATE STATUS-->  
        <div class="row" style="margin-bottom:25px;">
            <div class="col-lg-3"></div>
            <div id="postedFeeds" class="col-lg-6">
                <form action="" method="post" id="updateStatus">
                    <textarea name="status" class="updateStatusInput" placeholder="What's going on?"></textarea>
                    <input type="submit" name="submitstatus" value="Update" class="statussubmit hidden">
                </form>
                <?php getNewsFeed(); ?> <!--LOAD FIRST 8 ITMES-->
            </div>
            <div class="col-lg-3"></div>
        </div><!--end div class row-->

        <div id="loadMoreFeed" style="display:none;" ></div>
    </p>
</div><!--end container div-->

<div style="clear:both;"></div>


<!--SCRIPT TO LOAD NEXT 8 ITEMS-->
<script>
$(document).ready(function() {
    doMouseWheel1 = 1 ;
    $("#postedFeeds").append( "<p id='feedlast'></p>" );

    $(window).on('scroll', function() {
        if (!doMouseWheel1)
            return;
        var distanceTop1 = $('#feedlast').offset().top - $(window).height();
        if  ($(window).scrollTop() > distanceTop1) {
            $('div#loadMoreFeed').show();
            doMouseWheel1 = 0 ;
            $.ajax({
                dataType : "html",
                url: "process/loadMoreFeed.php?lastPost="+ $(".postSection:last").attr('id'),
                success: function(html1) {
                    doMouseWheel1 = 1 ;
                    if(html1){
                        $("#postedFeeds").append(html1);
                        $("#feedlast").remove();
                        $('textarea').autosize();
                        $("#postedFeeds").append( "<p id='feedlast'></p>" );
                        $('div#loadMoreFeed').hide();
                    } else {
                        //Disable Ajax when result from PHP-script is empty (no more DB-results )
                        $('div#loadMoreFeed').replaceWith( " " );
                        doMouseWheel1 = 0 ;
                    }
                }
            });
        }
    });
});

<!--END SCRIPT TO LOAD NEXT 8 ITEMS-->

<!--AUTO RESIZE PLUGIN-->
$('textarea').autosize();



<!--SCRIPT TO SUBMIT FORM WHEN ENTER PRESSED AND NEW LINE WHEN SHIFT+ENTER PRESSED-->
$(function(){
    $('.commentTextarea').keypress(function(event){
        var id = $(this).closest(".commentForm").data("id");
        if (event.keyCode==13 && !event.shiftKey) {
            event.preventDefault();
            $(this).closest(".commentForm[data-id='"+id+"']").submit();
            return false;
        }
    });

<!--SCRIPT TO SUBMIT COMMENT ON ENTER-->
    $(".commentForm").submit(function(event1) {
        // Stop form from submitting normally
        event1.preventDefault();

        // Get some values from elements on the page:
        var $form = $(this),
        activityid = $form.data("id"),
        comment = $form.find( "textarea[name='comment']" ).val(),
        url = "process/insertComment.php";

        // Send the data using post
        var posting = $.post( url, { activityid: activityid, comment: comment } );

        // Put the results in a div
        posting.done(function( data ) {
            $form.find('.commentTextarea').val('');
        });
        return false;
    });
});


<!--SCRIPTS TO LOAD COMMENTS-->
$(document).ready(function(){
    var id = $('.commentsContent').data("id");
    $(".commentsContent[data-id='"+id+"']").load("process/loadComments.php?activityid="+id);
});

window.setInterval(function(){
    var id = $('.commentsContent').data("id");
    $(".commentsContent[data-id='"+id+"']").load("process/loadComments.php?activityid="+id);
}, 3000);
</script>


<?php
    include 'includes/footer.php';
?>

Here is the getNewsFeed()

/*PHP variables set above.  Too long to show*/

        echo "
        <div class='postSection' id='$activityid'>
            <div class='postedFeed'>
                <div class='activitypost'>
                    <!--IMAGE-->
                    <div class='postImageSection'>
                        <p><a href='/$activityusername'><img class='postImage' src='$activityprofilephoto'></a></p>
                        <p class='postUsername'><a href='/$activityusername'>$activityusername</a></p>
                    </div>

                    <!--CONTENT-->
                    <p class='postContent'>
                    ";

                        if ($activitytype=="accountcreated") {
                            echo "<a href='/$activityusername'>$activityusername</a> joined StemEdNet!";
                        }
                        elseif ($activitytype=="status") {
                            echo "$activitycontent";

                            if ($activityfileid != "0") {
                                if ($filetype=="image/jpeg" || $filetype=="image/png"  || $filetype=="image/gif" || $filetype=="image/jpg") {
                                    echo "<div style='margin-top:10px;'><a href='$filelink' data-lightbox='image-$activityfileid'><img class='thumb' src='$filelink'></a></div>";
                                }

                                elseif ($filetype=="audio/mp3" || $filetype=="audio/mp4"  || $filetype=="audio/mpeg") {
                                    echo "<div style='margin-top:10px;'>
                                    <audio width='100' controls>
                                      <source src='$filelink' type='audio/mpeg'>
                                      <source src='$filelink' type='audio/mp4'>
                                      <source src='$filelink' type='audio/mp3'>
                                      <embed height='50' width='100' src='$filelink'>
                                    </audio>
                                    </div>";
                                }

                                elseif ($filetype=="video/mp4" || $filetype=="video/mpeg") {
                                    echo "
                                    <div style='margin-top:0px;'>
                                    <video width='140' height='240' controls>
                                        <source src='$filelink' type='video/mp4'>
                                        <source src='$filelink' type='video/mpeg'>
                                    </video>
                                    </div>
                                    ";
                                }
                                else {
                                    echo "<div style='margin-top:10px;'><a target='_blank' href='?getfile=$activityfileid'>Download</a></div>";
                                }
                            }
                        }

                    echo"
                    </p>
                </div>

                <div style='clear:both;'></div>
            </div>

            <div class='commentSection'>
                <div class='commentsContent' data-id='$activityid'>
                    <!--Comments are loaded into here using jQuery-->
                </div>
                <form class='commentForm' action='' data-id='$activityid'>
                    <textarea name='comment' class='commentTextarea' placeholder='Comment...'></textarea>
                    <input type='submit' class='hidden' name='commentsubmit' value='Comment'>
                </form>
            </div><!--end commentSection-->
            ";
        echo "</div>";//end col-lg-8
    }//end while
}//end getNewsFeed()

Answer 1

The problem is the .keypress() function. You need to use jquery's .on() function for delegated events.

When you use .keypress() it will attach the event handler to any .commentTextArea elements that exist at the time. When you add new commentTextArea elements through scrolling, it doesn't attach the keypress event handler to those new ones. When you use the .on() function it will respond even with new commentTextAreas that are added later on. So you can rewrite it like so:

$('#postedFeeds').on('keypress', '.commentTextarea', function(event){
    var id = $(this).closest(".commentForm").data("id");
    if (event.keyCode==13 && !event.shiftKey) {
        event.preventDefault();
        $(this).closest(".commentForm[data-id='"+id+"']").submit();
        return false;
    }
});