Javascript Ajax页面加载和Java脚本

我使用jQuery和另一个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>

"/>
$（函数（）{
$（“.like”）。单击（函数（）
{
var id=$（this.attr（“id”）；
var name=$（this.attr（“name”）；
var dataString='id='+id；
var parent=$（这是）；
如果（名称=='up'）
{
$（this.fadeIn（200.html）；
$.ajax({
类型：“POST”，
url:“vote.php”，
数据：dataString，
cache:false，
成功：函数（html）
{
html（html）；
}
});
}
返回false；
});
});
$（函数（）{
var$container=$（'#contain'）；
$container.imagesLoaded（函数（）{
$container.com({
itemSelector:“.box”，
列宽：305
});
});
$container.infinites卷({
导航选择器：'#页面导航'，//页面导航的选择器
下一个选择器：“#页面导航a”，//下一个链接（到第2页）的选择器
itemSelector:'.box'，//将检索的所有项目的选择器
装载：{
FinishedMg:“没有更多要加载的帖子。”，
img:'templates//images/ajax loader.gif'
}
},
//触发器作为回调
函数（新元素）{
var$newElems=$（新元素）；
$newElems.imagesLoaded（函数（）{
$container.mashing（'added'，$newElems）；
//投票表决
$（“.like”）。单击（函数（）
{
var id=$（this.attr（“id”）；
var name=$（this.attr（“name”）；
var dataString='id='+id；
var parent=$（这是）；
如果（名称=='up'）
{
$（this.fadeIn（200.html）；
$.ajax({
类型：“POST”，
url:“vote.php”，
数据：dataString，
cache:false，
成功：函数（html）
{
html（html）；
}
});
}
返回false；
});
//结束表决
});
});
});

正如你所看到的，我已经添加了两次相同的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>

$（函数（）{
$（“.like”）。单击（函数（）
{
var id=$（this.attr（“id”）；
var name=$（this.attr（“name”）；
var dataString='id='+id；
var parent=$（这是）；
如果（名称=='up'）
{
$（this.fadeIn（200.html）；
$.ajax({
类型：“POST”，
url:“vote.php”，
数据：dataString，
cache:false，
成功：函数（html）
{
html（html）；
}
});
}
返回false；
});
});
尝试
$（“.like”）。在（'click'，function（）
上而不是
$（.like”）。单击（function（）
投票2次的原因是您正在附加
$（.like”）的事件处理程序。单击两次
。单击
.like
时，它将执行附加的所有事件处理程序

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

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

记住只执行此脚本一次



$（函数（）{
var$container=$（'#contain'）；
$container.imagesLoaded（函数（）{
$container.com({
itemSelector:“.box”，
列宽：305
});
});
$container.infinites卷({
导航选择器：'#页面导航'，//页面导航的选择器
下一个选择器：“#页面导航a”，//下一个链接（到第2页）的选择器
itemSelector:'.box'，//将检索的所有项目的选择器
装载：{
FinishedMg:“没有更多要加载的帖子。”，
img:'templates//images/ajax loader.gif'
}
},
//触发器作为回调
函数（新元素）{
var$newElems=$（新元素）；
$newElems.imagesLoaded（函数（）{
$container.mashing（'added'，$newElems）；
//投票表决
$（“.like”）。单击（函数（）
{
var id=$（this.attr（“id”）；
var name=$（this.attr（“name”）；
var dataString='id='+id；
var parent=$（这是）；
如果（名称=='up'）
{
$（this.fadeIn（200.html）；
$.ajax({
类型：“POST”，
url:“vote.php”，
数据：dataString，
cache:false，
成功：函数（html）
{
html（html）；
}
});
}
返回false；
});
//结束表决
});
});
});
"/>
将$.on用于第一个javascript块，并删除第二个脚本块
$("#contain").on("click",".like",function(){
});

    <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>