jquery ajax php -problem不止一次运行jquery代码

Question

i wrote some codes to build a like for post. that's when i click on a photo to change the image, and add one number to the likes numbers, and then again, when i click on it, return to the previous one. the code i've written works well for both clicks "insert" and the "dilite" query, and when I click on a photo, the picture changes and a number goes up, but if I click again, it does not work anymore and i have to refresh page agane to works. index.php:

<?php 
$pgt=1;
$uid=1;
$pst="SELECT * FROM `tbl_users_posts` WHERE id='$pgt'";
    $rzp=mysqli_query($conn,$pst);
    $rpz=mysqli_fetch_assoc($rzp);
        $sid=$rpz['id'];$pos=$rpz['post'];
echo $pos;
?>
<span class="ic_lk ic_">
<?php
$iamlkp="SELECT id FROM `t_plik` WHERE  pid='$sid'";
    $imlkp=mysqli_query($conn,$iamlkp);
    $mylkp=mysqli_num_rows($imlkp);
$iamlkp2="SELECT id FROM `t_plik` WHERE  pid='$sid' AND uid='$uid'";
    $imlkp2=mysqli_query($conn,$iamlkp2);
    $mylkp2=mysqli_num_rows($imlkp2);?>
</span>
<script>
$('document').ready(function(){
    var mylk2= <?php echo $mylkp2;?>;
    var pgt= <?php echo $pgt;?>;
    var uid= <?php echo $uid;?>;

    if(mylk2==0) {
        $('.ic_lk').html('<img class="li_ik1" src="_pc/lk.png"></img>'); 
        }else if(mylk2>0){
        $('.ic_lk').html('<img class="li_ik2" src="_pc/lkm.png"></img>'); 
    }

$(".li_ik1").click(function(){

    $.ajax({
    url: "ins.php" ,
    type: 'POST',
        data:{pgt:pgt,uid:uid}
            });
    $(this).replaceWith('<img class="li_ik2" src="_pc/lkm.png"></img>');
    $('.nm_lk').replaceWith('<span class="nm_lk nm_"><?php echo $mylkp+1;?></span>');
});

    $(".li_ik2").click(function(){

    var mylk2= <?php echo $mylkp2;?>;
    var pgt= <?php echo $pgt;?>;
    var uid= <?php echo $uid;?>;
    var ik1=ik1;
        $.ajax({
                url: "del.php" ,
                type: 'POST',
                data:{pgt:pgt,uid:uid,ik1:ik1}
             });
    $(this).replaceWith('<img class="li_ik1" src="_pc/lk.png"></img>');
    $('.nm_lk').replaceWith('<span class="nm_lk nm_"><?php echo $mylkp-1;?></span>');
    });
}); 
</script>

ins.php:

$sid=$_POST['pgt'];
$uid=$_POST['uid'];
if(isset($_POST['pgt'])){
    $inpp=mysqli_query($conn,"INSERT INTO t_plik (pid,uid)VALUES('$sid','$uid')");
}

del.php:

$sid=$_POST['pgt'];
$uid=$_POST['uid'];
if(isset($_POST['pgt'])){
    $inpp=mysqli_query($conn,"DELETE FROM t_plik WHERE pid='$sid' AND uid='$uid'");
}

thanks

Answer 1

this because you bind onClick event to dynamically created span you should try the following

    <?php 
         $pgt=1;
         $uid=1;
           $pst="SELECT * FROM `tbl_users_posts` WHERE id='$pgt'";
            $rzp=mysqli_query($conn,$pst);
            $rpz=mysqli_fetch_assoc($rzp);
                $sid=$rpz['id'];$pos=$rpz['post'];
          echo $pos;
          ?>
            <div id="like_wrapper">
<span class="ic_lk ic_">
</div>
            <?php
             $iamlkp="SELECT id FROM `t_plik` WHERE  pid='$sid'";
            $imlkp=mysqli_query($conn,$iamlkp);
            $mylkp=mysqli_num_rows($imlkp);
        $iamlkp2="SELECT id FROM `t_plik` WHERE  pid='$sid' AND uid='$uid'";
            $imlkp2=mysqli_query($conn,$iamlkp2);
            $mylkp2=mysqli_num_rows($imlkp2);?>
            </span>
            <script>   
          $('document').ready(function(){ 
        var mylk2= <?php echo $mylkp2;?>;
        var pgt= <?php echo $pgt;?>;
         var uid= <?php echo $uid;?>;

            if(mylk2==0) {
                $('.ic_lk').html('<img class="li_ik1" src="_pc/lk.png"></img>'); 
                }else if(mylk2>0){
                $('.ic_lk').html('<img class="li_ik2" src="_pc/lkm.png"></img>'); 
            }
        $("#like_wrapper").on('click','span.li_ik1',function(){

            $.ajax({
            url: "ins.php" ,
            type: 'POST',
                data:{pgt:pgt,uid:uid}
                    });
            $(this).replaceWith('<img class="li_ik2" src="_pc/lkm.png"></img>');
            $('.nm_lk').replaceWith('<span class="nm_lk nm_"><?php echo $mylkp+1;?></span>');
        });

        $("#like_wrapper").on('click','img.li_ik2',function(){

            var mylk2= <?php echo $mylkp2;?>;
            var pgt= <?php echo $pgt;?>;
            var uid= <?php echo $uid;?>;
            var ik1=ik1;
                $.ajax({
                        url: "del.php" ,
                        type: 'POST',
                        data:{pgt:pgt,uid:uid,ik1:ik1}
                     });
            $(this).replaceWith('<img class="li_ik1" src="_pc/lk.png"></img>');
            $('.nm_lk').replaceWith('<span class="nm_lk nm_"><?php echo $mylkp-1;?></span>');
            });
        }); 
        </script>

Give it a try and do post back i will try to follow this thread.