Question

我使用jQuery Masonry和另一个javascript进行投票。这是代码

<div id="contain">

<?php

    $result = $mysqli->query("SELECT * FROM posts ORDER BY id DESC LIMIT 0, 20");

    while($row = mysqli_fetch_array($result))
    {

        $mes_id = $row['id'];
        $up = $row['likes'];



?>  
            <div class="box">
            <img src="images/<?php echo $row['image']; ?>"/>
            <div class='up'>

<a href="" class="like" id="<?php echo $mes_id;?>" name="up"><?php echo $up; ?></a>

          </div><!--box-->
<?php } ?>
        </div>

        <nav id="page-nav">
            <a href="data_index.php?page=2"></a>
</nav>
               <script>

        $(function() {
$(".like").click(function()
{
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);

if (name=='up')
{
$(this).fadeIn(200).html;
$.ajax({
type: "POST",
url: "vote.php",
data: dataString,
cache: false,

success: function(html)
{
parent.html(html);
}
});
}
return false;
});
});
</script>

<script src="js/jquery.masonry.min.js"></script>
<script src="js/jquery.infinitescroll.min.js"></script>

    <script>
    $(function(){
    var $container = $('#contain');
    $container.imagesLoaded(function(){
    $container.masonry({
        itemSelector : '.box',
        columnWidth : 305

    });
    });

    $container.infinitescroll({
    navSelector  : '#page-nav',    // selector for the paged navigation 
    nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
    itemSelector : '.box',     // selector for all items you'll retrieve
    loading: {
        finishedMsg: 'No more posts to load.',
        img: 'templates/<?php echo $settings['template'];?>/images/ajax-loader.gif'
    }
    },
    // trigger Masonry as a callback
    function( newElements ) {
    var $newElems = $( newElements );
    $newElems.imagesLoaded(function(){
        $container.masonry( 'appended', $newElems );
    //Voting
    $(".like").click(function()
    {
    var id = $(this).attr("id");
    var name = $(this).attr("name");
    var dataString = 'id='+ id ;
    var parent = $(this);

    if (name=='up')
    {
    $(this).fadeIn(200).html;
    $.ajax({
    type: "POST",
    url: "vote.php",
    data: dataString,
    cache: false,

    success: function(html)
    {
    parent.html(html);
    }
    });
    }
    return false;
    });
    //End voting
    });
    });
    });
</script>

正如您所看到的，我已经添加了两次相同的JavaScript。在投票的第一页点击它脚本投票2次。但如果我删除第一个javascript的投票，它只能在第二页。如果我删除第二个javascript投票将只在第一页工作。这次2次投票只在第二页加载时发生。任何人都可以帮我解决这个问题。

这是投票javascript，因此您可以轻松地看到它

<script>

$(function() {
    $(".like").click(function()
    {
    var id = $(this).attr("id");
    var name = $(this).attr("name");
    var dataString = 'id='+ id ;
    var parent = $(this);

    if (name=='up')
    {
    $(this).fadeIn(200).html;
    $.ajax({
    type: "POST",
    url: "vote.php",
    data: dataString,
    cache: false,

    success: function(html)
    {
    parent.html(html);
    }
    });
    }
    return false;
    });
    });
</script>

Answer 1

投票2次的原因是您要为$(".like").click两次附加事件处理程序。单击.like时，它将执行附加的所有事件处理程序。

如果我删除第一个javascript进行投票，它只会在第2页，如果我删除第二个javascript投票将只在第1页工作。这次2次投票只在第二页加载时发生

这是因为您已在页面上动态创建元素。我建议使用委托事件处理程序（$.on）。尝试：

$("#contain").on("click",".like",function(){
});

请记住只执行一次此脚本

Answer 2

尝试$(".like").on('click',function()而不是$(".like").click(function()

Answer 3

    <script>
        $(function(){
            var $container = $('#contain');
            $container.imagesLoaded(function(){
                $container.masonry({
                    itemSelector : '.box',
                    columnWidth : 305

                });
            });

            $container.infinitescroll({
                navSelector  : '#page-nav',    // selector for the paged navigation 
                nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
                itemSelector : '.box',     // selector for all items you'll retrieve
                loading: {
                    finishedMsg: 'No more posts to load.',
                    img: 'templates/<?php echo $settings['template'];?>/images/ajax-loader.gif'
                }
            },
            // trigger Masonry as a callback
            function( newElements ) {
                var $newElems = $( newElements );
                $newElems.imagesLoaded(function(){
                    $container.masonry( 'appended', $newElems );
                //Voting
                $(".like").click(function()
            {
         var id = $(this).attr("id");
          var name = $(this).attr("name");
          var dataString = 'id='+ id ;
        var parent = $(this);

         if (name=='up')
        {
          $(this).fadeIn(200).html;
         $.ajax({
          type: "POST",
        url: "vote.php",
           data: dataString,
          cache: false,

        success: function(html)
         {
      parent.html(html);
        }
       });
        }
       return false;
       });
            //End voting
                });
            });
        });
      </script>

              <div id="contain">

           <?php

        $result = $mysqli->query("SELECT * FROM posts ORDER BY id DESC LIMIT 0, 20");

      while($row = mysqli_fetch_array($result))
        {

       $mes_id = $row['id'];
         $up = $row['likes'];



          ?>  
        <div class="box">
        <img src="images/<?php echo $row['image']; ?>"/>
        <div class='up'>

            <a href="" class="like" id="<?php echo $mes_id;?>" name="up"><?php echo $up; ?></a>

       </div><!--box-->
       <?php } ?>
       </div>

      <nav id="page-nav">
        <a href="data_index.php?page=2"></a>
         </nav>

Ajax页面加载和javascripts

3 个答案: