Jquery "On click" 或 "unbind" 不适用于 php 循环

Question

我正在使用Jquery Ajax和php，我在我的控制器中使用Ajax，我有php循环循环里面有showmore button和showmore按钮和&;Last comment &;(来自数据库)，所以每当我点击&;showmore &;按钮……它的隐藏和"新评论";和新的"showmore";按钮(HTML)将以Ajax response的形式出现但问题是每当我第一次点击showmore时按下按钮，它就工作了数据(新评论和显示更多按钮)即将作为ajax响应，但如果我下次点击"ShowMore"(这是作为ajax响应来的)然后没有任何工作，我尝试了以下功能

$('.show_more').unbind('click').bind('click', function (e)

具有上述功能"第二次点击"不工作意味着"显示更多按钮"(这是ajax响应)不工作如果尝试使用以下代码，则多次函数work/execute

$(document).on('click','.show_more',function()

这是我的代码在循环和我的脚本代码，我错了吗?我该如何解决这个问题?提前谢谢。

function fetch()
{
$FeedId; (dynamic)
$FeedData = $this->M_main->GetFeedData(); // getting feed data from database
foreach($FeedData as $feeds)
{
if($feeds['flag']=="feed")
{
$GetFeedComments = $this->M_main->GetFeedsComment($FeedId);
$TotalFeedsComments=$GetFeedComments['TotalRows'];
if($TotalFeedsComments>1)
{
$Loads='<div class="show_more_main" id="show_more_main'.$postID.'">
<input type="hidden" name="fixs" value="'.$postID.'" id="fixs">
<input type="hidden" name="MinValue" value="'.$postID.'" id="MinValue">
<input type="hidden" name="FeedIdd" value="'.$FeedId.'" id="FeedIdd">
<input type="hidden" name="MaxValue" value="'.$postID.'" id="MaxValue">
<span id='.$postID.' data-val='.$postID.' data-status='.$postID.' class="show_more" title="Load more posts" data-feds='.$FeedId.'>Show more</span>
<span class="loding" style="display: none;"><span class="loding_txt">Loading...</span></span>
</div>';
}

}
}
$pathss= base_url()."Main/GetFeedCommentsById"; 
echo "
<script>
$('.show_more').unbind().click(function(e) {
e.preventDefault(); 
var ID = $(this).attr('id');
var vals=$(this).data('val');
var feds=$(this).data('feds');
$('.show_more').hide();
$.ajax({
type:'POST',
url:'".$pathss."',
data:{id:ID, vals:vals},
success:function(html){
$('#show_more_main'+ID).remove();
$('.postList'+feds).append(html);
}
});

});
</script>
";

Answer 1

问题是您正在删除ajax成功消息的html节点，并且事件侦听器消失了。

您应该再次将侦听器添加到新节点;

<script>
// Assign the event listener to a variable, to reuse it
let myEventListenerFunction = function(e) {
e.preventDefault(); 
var ID = $(this).attr('id');
var vals=$(this).data('val');
var feds=$(this).data('feds');
$('.show_more').hide();
$.ajax({
type:'POST',
url:'".$pathss."',
data:{id:ID, vals:vals},
success:function(html){
$('#show_more_main'+ID).remove();
$('.postList'+feds).append(html);
// Add event to a new node
$('.show_more').unbind().click(myEventListenerFunction);
}
});

}
$('.show_more').unbind().click(myEventListenerFunction);
</script>

Answer 2

有一些问题与你的代码，但如果你只是想使它的工作，因为它是在我看来最好的方式是将javascript部分从其余部分分开。实现这一目标的一种方法是将此脚本添加到页面中的单独js文件

中。

<script>
$(document).on('click','.show_more',function(e) {
e.preventDefault(); 
var $self = $(this);
var ID = $self.attr('id');
var vals=$self.data('val');
var feds=$self.data('feds');
$('.show_more').hide();
var url = $self.data('url');

$.ajax({
type:'POST',
url: url,
data:{id:ID, vals:vals},
success:function(html){
$self.remove();
$('.postList'+feds).append(html);
}
});

});
</script>

php部分必须有这样一个属性

$Loads='<div class="show_more_main" id="show_more_main'.$postID.'" data-url="'.$pathss.'">...</div>';