我有一个新闻Feed页面当我加载页面时加载8个项目，当用户向下滚动到页面底部时，它将加载8个项目。加载项目不是问题。在页面中，我有一个jquery脚本，如果用户按下enter键，则提交表单，如果用户在注释框中按shift + enter，则转到下一行。它适用于前8个项目，但不适用于AJAX加载的项目。
如何让jquery函数适用于通过AJAX加载的项目？
这是feed.php页面：
<?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';
?>
这是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()
答案 0 :(得分：2)
问题是.keypress（）函数。您需要将jquery的.on()函数用于委派事件。
当你使用.keypress（）时，它会将事件处理程序附加到当时存在的任何.commentTextArea元素。当您通过滚动添加新的commentTextArea元素时，它不会将keypress事件处理程序附加到那些新的。当您使用.on（）函数时，它甚至会响应稍后添加的新commentTextAreas。所以你可以像这样重写它：
$('#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;
}
});