jQuery ajax php-運行jquery代碼不止一次的問題

Question

我寫了一些代碼來構建類似的帖子。 那是當我單擊照片以更改圖像，然后在喜歡的數字上添加一個數字，然后再次單擊時，返回上一個數字。 我編寫的代碼對於單擊“插入”和“ dilite”查詢都適用，並且當我單擊照片時，圖片會更改並且數字會增加，但是如果再次單擊，它將不再起作用，並且我必須刷新頁面agane才能正常工作。 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'");
}

謝謝

Answer 1

這是因為您將onClick事件綁定到動態創建的span ，因此應嘗試以下操作

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

給它一個嘗試，並做回發，我將嘗試遵循此線程。