我是Javasript和JQuery的新手(使用它2天,并且在处理模式按钮上的单击功能时遇到问题。
[我生成了用于查看页面上帖子评论的模式,并且有一个按钮可以提交关于模式的评论,但是当我创建一个onclick函数并单击该按钮时,该函数会为每个帖子触发一次。
我不知道如何分开处理它们。
在这种情况下,警报(“ GO”)被触发12次,因为有12个帖子。我只需要开火1次
创建模态
function showComments(res) {
$('.modal').modal("show")
$('#modal-username').text(res[0].PostUsername)
$('#modal-post').text(res[0].PostBody)
var comments = ""
for (var i = 0; i < res.length; i++) {
comments += '<div><h6 class="m-0"><a href="#" class="text-primary">' + res[i].CommentUsername + '</a></h6><p class="m-0 mb-1">' + res[i].CommentBody + '</p><hr class="m-0"></div>';
}
$('.modal-body').html(comments)
$('.modal-footer').html('<input id="modal-comment-text" placeholder="Type comment " type="text" class="w-100" required="required"> <button type="button" id="modal-comment-submit" data-comment-submit="' + res[0].PostId +
'" class="btn btn-secondary">Post</button>')
}
Modal HTML
<div class="modal fade text-dark">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header d-flex flex-column">
<div class="d-inline-flex w-100">
<h5><a class="text-primary" href="#" id="modal-username">Username</a></h5> <button type="button" class="close" data-dismiss="modal"> <span>×</span> </button>
</div>
<p class="postmodal m-0 mx-1" id="modal-post"> This is post bla bla bla </p>
</div>
<div class="modal-body">
<div>
<h6 class="m-0"><a href="#" class="text-primary">Username</a></h6>
<p class="m-0 mb-1">First comment</p>
<hr class="m-0">
</div>
</div>
<div class="modal-footer">
<input id="modal-comment-text" placeholder="Type comment here" type="text" class="w-100" required="required"> <button type="button" id="modal-comment-submit" class="btn btn-secondary">Post</button>
</div>
</div>
</div>
</div>
Onclick功能
$(document).on("click", "#modal-comment-submit", function(){
alert( "GO" );
});
这是因为您对所有它们使用相同的ID。要解决此问题,您可以为他们提供一个通用的类和每个项目的特定ID。因此,您可以进行如下操作:
$(".modal-comment-submit").click(function(event){
alert("Post of id " + event.target.id + " was clicked");
});