我正在尝试实施评论部分，按下按钮后我想用ajax更新评论部分，这样页面就不必刷新...
在这个评论部分，我有1个textarea + 1个按钮+每个评论的几个隐藏字段，以便用户可以回答特定评论......
所以，如果有50个评论，那么还有50个答案字段，每个答案字段为1个......
除了一件事以外，每件事都有效......
- 或者我将按钮和字段的所有ID命名为相同名称（即.id =＆＃34; sendAnswer＆＃34;和id =＆＃34; answer＆＃34;，id =＆＃34; userID＆ ＃34;，...）然后只有第一个工作...
- 或者我动态地命名它们（即id =＆＃34; sendAnswer（echo $ i）），从而将它们命名为id =＆＃34; sendAnswer0＆＃34;，＆＃34; sendAnswer1＆＃34;，＆＃34 ; sendAnswer2＆＃34;，...然后我也为textarea和隐藏字段执行此操作（即.id =＆＃34; answer（echo $ i），id =＆＃34; userID（echo $ i）， ...）
这也很有效......除了现在我必须为每个人制作一个jQuery脚本......因为它们是动态创建的，这很难 - 随着更多评论的出现，有多少变化在...
方法1的代码：将它们全部命名为......
$(document).ready(function(){
"use strict";
$("#sendAnswer").click(function(){
var comment = $("#comment").val();
var userID = $("#userID").val();
var randomStringVideo = $("#randomStringVideo").val();
var commentID = $("#commentID").val();
$.ajax({
type: "POST",
url:'../scripts/comment.php',
data:"comment="+comment+"&userID="+userID+"&randomStringVideo="+randomStringVideo+"&commentID="+commentID,
success:function(){
$("#commentDiv").load(location.href + " #commentDiv>*", "");
$("#commentsDiv").load(location.href + " #commentsDiv>*", "");
$("#comment").val('');
}
});
});
});
正如我所说......这对第一个工作正常，其余的都是哑巴......
方法2的代码：我动态命名所有值......
$(document).ready(function(){
"use strict";
$("#sendAnswer"+$(this).val()).click(function(){ // this +$(this).val() doesn't work, only if I put #sendAnswer3 - then the 4th works and the rest are duds etc.
var comment = $("#comment"+$(this).val()).val(); // works perfectly no matter what #sendAnswer I use
var userID = $("#userID"+$(this).val()).val(); // works perfectly no matter what #sendAnswer I use
var randomStringVideo = $("#randomStringVideo"+$(this).val()).val(); // works perfectly no matter what #sendAnswer I use
var commentID = $("#commentID"+$(this).val()).val(); // works perfectly no matter what #sendAnswer I use
$.ajax({
type: "POST",
url:'../scripts/comment.php',
data:"comment="+comment+"&userID="+userID+"&randomStringVideo="+randomStringVideo+"&commentID="+commentID,
success:function(){
$("#commentDiv").load(location.href + " #commentDiv>*", "");
$("#commentsDiv").load(location.href + " #commentsDiv>*", "");
$("#comment"+$(this).val()).val(''); // this +$(this).val() doesn't work, only if I put #comment3 (matching the #sendAnswer)- then the 4th works and the rest are duds etc.
}
});
});
});
有了这个，我必须为每个可能的＃sendAnswer-number +＃comment-number命名它才能工作......并且有一组无限的数字可供选择0-（无限） - 这就是＆＃39; s不可行......
如果有兴趣......
动态创建问题按钮和字段的Php
.
.
.
<?php if ($_SESSION[numberOfComments] != 0) {
for ($i=0; $i<$_SESSION[numberOfComments]; $i++) ?> // run through all comments that aren't answers to other comments
// show comment info
<div class="media">// answer comment box starts here
<img class="mr-3 rounded" src="<?php $file = USER . $_SESSION['randomString'] . THUMBNAIL; if ( file_exists ( $file ) ) {echo $file; } else { echo USER . "default" . THUMBNAIL; } ?>" width="50" height="50" data-toggle="tooltip" data-placement="left" title="<?php echo $_SESSION['username']; ?>">
<div class="media-body">
<textarea class="form-control" rows="2" type="text" name="comment<?php echo $i; ?>" id="comment<?php echo $i; ?>" value="" placeholder="Great video!"></textarea>
<input type="hidden" name="userID<?php echo $i; ?>" id="userID<?php echo $i; ?>" value="<?php if ( isset ( $_SESSION['id'] ) ) { echo $_SESSION['id']; } ?>">
<input type="hidden" name="randomStringVideo<?php echo $i; ?>" id="randomStringVideo<?php echo $i; ?>" value="<?php echo $_GET['v']; ?>">
<input type="hidden" name="commentID<?php echo $i; ?>" id="commentID<?php echo $i; ?>" value="<?php echo $_SESSION['commentID_getComment']; ?>">
<button type="button" class="btn btn-primary float-right margin-top-5" id="sendComment<?php echo $i; ?>" value="<?php echo $i; ?>">
Answer
</button>
</div>
</div> // answer comment box ends here
<?php if ($_SESSION[numberOfAnswers][$i] != 0) {
for ($j=0; $j<$_SESSION[numberOfAnswers][$i]; $j++) { ?> // run through all answer to this comment
// show answer info
<?php }
}
}
} ?>
.
.
.
答案 0 :(得分：2)
两种方式..第一次使用类而不是ids .OR。第二个使用选择器ID以[id^="something"]开头..并且在两种方式中您都需要使用$(this)来引用相同的部分..对我而言，使用.load()刷新整个评论部分，您可以直接获取特定评论并将其附加到#commentDiv
在这种情况下使用$("#sendAnswer"+$(this).val()) $(this)引用什么/窗口或其他东西但不是你的元素
$(document).ready(function(){
"use strict";
$('button[id^="sendAnswer"]').on('click',function(){
var ThisIs = $(this);
var ClosestDiv = ThisIs.closest('.media-body');
var comment = ClosestDiv.find('textarea').val();
var userID = ClosestDiv.find('[id^="userID"]').val();
var randomStringVideo = ClosestDiv.find('[id^="randomStringVideo"]').val();
var commentID = ClosestDiv.find('[id^="commentID"]').val();
$.ajax({
type: "POST",
url:'../scripts/comment.php',
data:"comment="+comment+"&userID="+userID+"&randomStringVideo="+randomStringVideo+"&commentID="+commentID,
success:function(){
var commentDiv = ThisIs.closest('.BigDiv').find('[id^="commentDiv"]'); // change `.BigDiv` with the div id/class which hold both commentDiv and comment section
commentDiv.load(location.href + " #commentDiv>*", "");
ClosestDiv.find('textarea').val('');
}
});
});
});
注意：使用包含两者的div id / class更改
.BigDivcommentDiv和评论部分
答案 1 :(得分：0)
使用您当前的方法，使用id标识所有内容时，最佳选择是使用event delegation。在页面加载时存在的某个父元素上只创建一个事件处理程序，通过委托将处理任何按钮 - 现有和将来。处理程序触发后，您可以确定要使用的元素集，并继续正常运行。
以下是一个示例，使用body作为父级，但您可以使用包含所有当前和未来按钮/输入的任何元素，例如，您可能有父<div id="something">。这也假设您的按钮输入是实际的button元素，如果情况并非如此，您必须进行调整：
$(document).ready(function(){
"use strict";
// A single event handler on body, which handles any child button
$("body").on('click', 'button', function(event) {
// $(this) will be the button that was clicked. We can find its id,
// and if your buttons all have ids like sendAnswer1, sendAnswer2,
// sendAnswerX, we can find the X
var id = $(this).attr('id').replace('sendAnswer', '');
// Now we can use the X to access each of this button's matching
// inputs etc. Again this assumes your other elements have ids like
// commentX.
var comment = $("#comment" + id).val(),
userID = $("#userID" + id).val(),
// ... etc, rest of your code
与上面链接的the article一样，the jQuery .on() docs对事件委派有很好的描述（请参阅＆＃34;直接和委派事件＆＃34;）。
另一个我认为更整洁的选项是将每个注释部分包装在div（或任何标识元素中，使得每个注释/输入/按钮集嵌套在其中），并且仅使用每个元素的类。再次使用事件委派，您可以找到包含单击按钮的部分，从而确定您正在使用的输入元素。
例如，您的HTML可能如下所示：
<div id="all-comments">
<div class="comment-section">
<textarea class="comment" name="whatever"> ... </textarea>
<button name="button" type="submit">Post!</button>
<!-- your hidden fields, etc -->
</div>
<div class="comment-section">
...
</div>
<!-- ... etc, many comment sections -->
</div>
现在你的JS看起来像这样：
$(document).ready(function(){
"use strict";
// A single event handler on the parent div, which handles any child button
$("#all-comments").on('click', 'button', function(event) {
// $(this) will be the button that was clicked. We need to find the
// .comment-section containing that button
var div = $(this).closest('div.comment-section');
// Now we can find all elements inside that particular section
var comment = $(".comment", div).val(),
userID = $(".userID", div).val(),
// ... etc, rest of your code