jquery点击功能触发两次问题

时间:2014-08-31 01:04:03

标签: javascript php 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:警报仅用于故障排除。

问题是,当新项目加载了脚本的无限滚动部分并且我点击帖子项目时,我得到了警告&#34;喜欢&#34;或者&#34;不喜欢&#34;每次点击其中任何一个时,两次。我确实知道我已经复制了脚本,但我需要在无限滚动脚本的内部和外部使用脚本才能使其工作。文章的东西只是一个读取更多的插件(在无限滚动的内部和外部也需要这个)。我试过移动的东西,但似乎没有任何作用。并澄清一下:我在加载新帖子后才遇到问题。无限卷轴外的第一个帖子工作正常。

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()和.unbind()以及我能想到的所有方法。我仍然得到了#34;喜欢&#34;的双重和三重弹出窗口并且&#34;不喜欢&#34; (应该只有1)。除了unbind和off之外的任何想法?

EDIT2:使用新建议更新了所有脚本。仍然没有工作。

2 个答案:

答案 0 :(得分:0)

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

see the official docs

答案 1 :(得分:-1)

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