0

我使用 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>
4

3 回答 3

1

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

如果我删除第一个 javascript 进行投票，它将仅在第二页有效，如果我删除第二个 javascript，投票将仅在第一页有效。这 2 次投票仅在第二页加载时发生

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

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

记住只执行一次这个脚本

于 2013-06-24T06:20:05.553 回答
0 

    <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>
于 2013-06-24T06:28:13.710 回答
0

尝试$(".like").on('click',function()代替$(".like").click(function()

于 2013-06-24T06:17:12.630 回答