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 回追加しました。投票するときの最初のページで、スクリプトは2回投票しています。しかし、投票のために最初のJavaScriptを削除すると、2ページ目でのみ機能します。2番目のjavascript投票を削除すると、最初のページでのみ機能します。この 2 回の投票は、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 回投票する理由は、2 回のイベント ハンドラーをアタッチしているためです$(".like").click。をクリックする.likeと、アタッチされているすべてのイベント ハンドラが実行されます。

投票の最初のJavaScriptを削除すると、2ページ目でのみ機能し、2番目のJavaScript投票を削除すると、1ページ目でのみ機能します。この2回の投票は、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 に答える