jquery点击函数触发两次的问题



我已经在谷歌上搜索了几个小时了,但我就是想不通。这是脚本:

    <script type="text/javascript">
$(document).ready(function(){

    $('article').readmore({
        maxHeight: 75,
        speed: 300,
        moreLink: '<a href="#">Read more...</a>',
        lessLink: '<a href="#">Read less...</a>'
    });
    $('.plus-button').click(function(){
        var postid = $(this).data('postid');
        $(this).siblings('.minus-button').removeClass('disliked');    
        $(this).toggleClass('liked');
        $.ajax({
            type:"POST",
            url:"php/votesystem.php",
            dataType : 'html',
            data:'act=like&postid='+postid,
            context: this,
            success: function(data){
                $(this).html(data);
            }
        });
    });
    $('.minus-button').click(function(){
        var postid = $(this).data('postid');
        $(this).siblings('.plus-button').removeClass('liked');    
        $(this).toggleClass('disliked');
        $.ajax({
            type:"POST",
            url:"php/votesystem.php",
            dataType : 'html',
            data:'act=dislike&postid='+postid,
            context: this,
            success: function(data){
                $(this).html(data);
            }
        });
    }); 
    $("#infobox").click(function(){
        $(this).hide();
    });     


});
$("#loader").hide();
    var load = 0;
    var nbr = "<?php echo $nbr; ?>";
    $(window).scroll(function(){
        if($(window).scrollTop() == $(document).height() - $(window).height())
        {
            $("#loader").show();
            load++;
            if(load * 10 > nbr){
                $("#messages").text("No more posts");
                $("#loader").hide();
            }
            else{
                $.post("php/newquery.php",{load:load},function(data){
                    $("#contentwrapper").append(data);
                    $("#loader").hide();

                    $('.plus-button').on("click", function(){
                        var postid = $(this).data('postid');
                        $(this).siblings('.minus-button').removeClass('disliked');    
                        $(this).toggleClass('liked');
                        $.ajax({
                            type:"POST",
                            url:"php/votesystem.php",
                            dataType : 'html',
                            data:'act=like&postid='+postid,
                            context: this,
                            success: function(data){
                                $(this).html(data);
                                alert("Liked");
                            }
                        });
                    });
                    $('.minus-button').on("click", function(){
                        var postid = $(this).data('postid');
                        $(this).siblings('.plus-button').removeClass('liked');    
                        $(this).toggleClass('disliked');
                        $.ajax({
                            type:"POST",
                            url:"php/votesystem.php",
                            dataType : 'html',
                            data:'act=dislike&postid='+postid,
                            context: this,
                            success: function(data){
                                $(this).html(data);
                                alert("Disliked");
                            }
                        });
                    });
                    $('article').readmore({
                        maxHeight: 75,
                        speed: 300,
                        moreLink: '<a href="#">Read more...</a>',
                        lessLink: '<a href="#">Read less...</a>'
                    });

                });
            }
        }
    });
</script>

PS:警报仅用于故障排除。

问题是,当新项目加载了脚本的无限滚动部分,并且我单击帖子项目时,每次单击其中任何一个,我都会收到两次"喜欢"或"不喜欢"的警告。我确实意识到我已经复制了脚本,但我需要在无限卷轴脚本的内部和外部都有脚本才能工作。文章只是一个阅读更多的插件(在无限滚动内外也需要这个)。我试着把东西搬来搬去,但似乎什么都不起作用。并澄清:我只有在新的职位加载后才有问题。无限卷轴外的第一个帖子运行良好。

newquery.php

<?php
session_start();
require_once("connect.php");
require_once("config.php");
$load = htmlentities(strip_tags($_POST['load'])) * 10;
$query = mysqli_query($connect,"SELECT * FROM posts WHERE totalupvotes < $trendmin AND deleted=0 ORDER BY added DESC LIMIT " . $load . ",10");
while($row = mysqli_fetch_array($query)){
    $postloopid = $row['id'];
    echo '<div id="postlist">
        <div style="width:400px; font-size:18px; font-weight:bold;">
        <a target="_blank" href="post.php?id=' . $row['id'] . '">' . $row['title'] . '</a>
        </div><br />
        <article class="slide">' . nl2br($row['post']) . '</article>
        <br />';
        include("votebox.php");
        echo '
        <br />
        by <a style="font-size:18px;" href="profile.php?id=' . $row['submittedby'] . '">' . $row['submitteduser'] . '</a>';
        echo ' at <span style="font-size:12px;">' . $row['added'] . '</span><span style="float:right; margin-right: 10px;"><a target="_blank" href="post.php?id=' . $row['id'] . '#commentfield">' . $row['totalcomments'] . ' comments</a></span></div>';
}
?>

Votebox.php包含在所有列出的帖子中:

<?php
// If postid is from frontpage use $postloopid as $postid
if(isset($postloopid)){
    $postid = $postloopid;
}
include("connect.php");



// If user logged in show votebox
if(isset($_SESSION['username'])){
    $userid = $_SESSION['userid'];
    $sql2 = mysqli_query($connect,"SELECT * FROM posts WHERE id='$postid' AND deleted=0");
    if($sql2){
        $voterow = mysqli_fetch_assoc($sql2);

         $checkupvote = $voterow['upvoters'];
         $checkdownvote = $voterow['downvoters'];
         $checkupvote = explode(" ",$checkupvote);
         $checkdownvote = explode(" ",$checkdownvote);
         if($checkupvote = array_search($userid,$checkupvote) == true){
            echo '<div class="voteboxwrapper">';
            echo '<div class="plus-button liked" data-postid="' . $postid . '" name="like">+ ' . $voterow['totalupvotes'] . '</div>';
            echo '<div class="minus-button" data-postid="' . $postid . '" name="dislike">- ' . $voterow['totaldownvotes'] . '</div>';
            echo $postid;
            echo '</div>';

         }
         elseif($checkdownvote = array_search($userid,$checkdownvote) == true){
             echo '<div class="voteboxwrapper">';
            echo '<div class="plus-button" data-postid="' . $postid . '" name="like">+ ' . $voterow['totalupvotes'] . '</div>';
            echo '<div class="minus-button disliked" data-postid="' . $postid . '" name="dislike">- ' . $voterow['totaldownvotes'] . '</div>';
            echo $postid;
            echo '</div>';

         }
         else{
             echo '<div class="voteboxwrapper">';
            echo '<div class="plus-button" data-postid="' . $postid . '" name="like">+ ' . $voterow['totalupvotes'] . '</div>';
            echo '<div class="minus-button" data-postid="' . $postid . '" name="dislike">- ' . $voterow['totaldownvotes'] . '</div>';
            echo $postid;
            echo '</div>';
         }
    }
    else {
        echo 'No result <br />';
    }
}
else {
    echo 'Cant find user';
}

?>

有什么想法吗?

编辑:我已经尝试了.off()和.ubind()所有我能想到的方法。我仍然会得到"喜欢"one_answers"不喜欢"的两个和三个弹出框(应该只有1个)。除了解除绑定之外还有什么想法吗?

第2版:用新建议更新了所有脚本。仍然不起作用。

您不想使用$('.plus-button').click(...,而是希望使用$('.plus-button').one('click', ...,顾名思义,它只绑定一次!

请参阅官方文档

尝试将$(window).scroll.....移动到文档就绪功能之外

最新更新