Jquery“点击”或“取消绑定”不适用于php循环

Posted 2023-02-24

【中文标题】Jquery“点击”或“取消绑定”不适用于php循环

【英文标题】：Jquery "On click" OR"unbind" not working with php loop

【发布时间】：2021-12-14 07:46:29

【问题描述】：

我正在使用 Jquery Ajax 和 php，我在我的控制器中使用 Ajax， 我有 php 循环和内部循环我有“显示更多按钮”，我有“显示更多”按钮和“最后评论”（来自 db），所以每当我点击“显示更多” 按钮...它的隐藏和“新 cmets”以及新的“ShowMore”按钮 (html) 将作为 Ajax Resonse 出现 但问题是每当我第一次点击“ShowMore”按钮时，它的工作和 数据（新评论和显示更多按钮）作为 ajax 响应出现，但如果我下次点击“ShowMore”（作为 Ajax 响应出现）则没有任何效果，我尝试使用以下功能

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

使用上述功能“第二次单击”不起作用意味着“显示更多按钮”（作为 ajax 响应出现）不起作用 如果尝试使用以下代码，则多次功能工作/执行

$(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>
                ";

【问题讨论】：

javascript 需要加载到您的主页中（即不通过 Ajax）并停留在那里。它不应该是 Ajax 响应的一部分（从上面的 sn-p 中不清楚是否是）

@ADyson：正如我提到的两个功能都可以“取消绑定”和“点击”但两者都有问题，这意味着如果我使用“取消绑定”然后只工作一次，如果我使用“点击”然后工作不止一次，我只想用一次，只要我点击按钮就会再次工作一次，就是这样

在 $(document).ready(function() ) 中编写你的 java 脚本代码

@Pramodkushwaha：意味着我必须写“文档准备好”......并在这之间放置代码？

@Nisha 我明白这一切。这就是我给出建议的原因。你试过了吗？

【参考方案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>

【讨论】：

还是一样，实际上我的问题是“点击”或“解除绑定”，它的工作时间只有或多次

不附加“以前的”数据不起作用

我重写了答案，因为想法是正确的，但是问题出在内部节点上，无论如何都会被重写。在 ajax 成功后，您应该再次添加事件

第二次点击不适用于您的代码

新的 html 代码包含具有正确名称和类的节点？

【参考方案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>';