我有一个充满评论的模态。我的代码采用JSON数组,将第一个索引作为原始帖子发布,然后遍历其余部分作为回复,并为每个帖子创建AJAX侦听器。当我单击AJAX按钮时,只有原始帖子按钮起作用,而当我单击原始帖子上的按钮时,它似乎会触发4次(在我的示例中为答复数)。
我尝试移动AJAX侦听器的代码,并删除了原始帖子的AJAX侦听器,但它似乎仍然可以工作并多次触发。
这是我生成模型的函数...
function ShowCommentsModal (res)
{
$('.modal').modal('show')
//Set HTML for main comment here
$('.ModalPost').html(
'<div id="Post"><div id="UserInfoDiv">// HTML CODE FOR ORIGINAL POST
);
// REMOVED CODE FOR REPOST AJAX HERE
//Set HTML for comments here
res.shift();
$('.CommentArea').html(''); // Clear HTML
$.each(res, function(index) { // Start of foreach loop
$('.CommentArea').html(
$('.CommentArea').html() +
// COMMENT HTML HERE
)
$('[data-likes]').click(function() {
var buttonid = $(this).attr('data-likes');
$.ajax({
type: "POST",
url: "api/likes?id=" + $(this).attr('data-likes'),
processData: false,
contentType: "application/json",
data: '',
success: function(r) {
var res = JSON.parse(r)
console.log(r)
$("[data-likes... //update like button')
},
error: function(r) { console.log(r) }
}); // END OF AJAX
}); //END OF DATA-LIKES CLICK FUNCTION
$('[data-comment]').click(function() {
var buttonid = $(this).attr('data-comment');
$.ajax({
type: "GET",
url: "api/comments?postid=" + $(this).attr('data-comment'),
processData: false,
contentType: "application/json",
data: '',
success: function(r) {
var res = JSON.parse(r)
console.log(res)
ShowCommentsModal.call(res);
},
error: function(r) { console.log(r) }
}); //END OF AJAX
}); //END OF COMMENT CLICK LIKE FUNCTION
}); //End of For Loop
} end of funcrion
生成按钮的代码
<button class="btn btn-primary" id="InteractButt" data-likes=“'+res[index].post_id+'“
按钮是动态生成的,我在其中放置了“ // COMMENT HTML HERE”