繁体   English   中英

jQuery Click函数触发两次的问题

[英]Problems with jquery click function firing twice

我已经搜索了几个小时,但我无法弄清楚。 这是脚本:

    <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()和.unbind()。 我仍然看到“喜欢”和“不喜欢”的双重和三次弹出窗口(假设只有1个)。 除了取消绑定和关闭之外还有其他想法吗?

EDIT2:更新了具有新建议的所有脚本。 还是不行。

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

查看官方文档

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM