Ajax頁面加載和JavaScript

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投票，則只能在第一頁中進行。 這兩次投票僅在第二頁加載時進行。 誰能幫助我解決這個問題。

這是可投票的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進行投票，它將僅在第二頁中工作；如果我刪除第二JavaScript進行投票，將僅在第一頁中工作。 僅在第二頁加載時才進行這兩次投票

這是因為您已經在頁面上動態創建了元素。 我建議改用委托事件處理程序（ $ .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>