使用AJAX時，jQuery單擊功能不起作用

Question

這是我的HTML代碼

    <input type="hidden" value="<?php echo $rslt['id'] ?>" id="res_id" />                            <!-- this line catch post id -->

<div id="likeSec">
    <h4><?php echo $rslt['likes'] ?> People Like this</h4>                                       <!-- this line show total likes -->

    <?php
    $kol=mysql_query("SELECT * FROM tbl_like_recipe WHERE res_id='".$rslt['id']."' && user_id='".$_SESSION['member_email']."'"); 
    $num_rows = mysql_num_rows($kol);                               // this query check this user already like this post or not    
        if($num_rows==0){                                           // if not liked already show like image
    ?>
    <div id="like" style="float:right;"><img src="images/like.png" width="45" /></div>
    <?php 
        }else{                                                      // if already like show unlike image
    ?>
    <div id="dislike" style="float:right;"><img src="images/unlike.png" width="45" /></div>
    <?php } ?>
</div>

這是我的劇本

<script>
$(document).ready(function(){
    $("#like").click(function(){
        var res_id=$("#res_id").val();
        $.post("like_recipe_prosses.php",{'data':res_id},function(cbd){
            $("#likeSec *").remove();
            $("#likeSec").html(cbd)
        })
    })

    $("#dislike").click(function(){
        var res_id=$("#res_id").val();
        $.post("dislike_recipe_prosses.php",{'data':res_id},function(cbd){
            $("#likeSec *").remove();
            $("#likeSec").html(cbd)
        })
    })
})
</script>

當我單擊“喜歡”時，我看到它變為“不喜歡”，但是如果單擊“不喜歡”，它將不起作用。 如果然后刷新頁面並單擊“不喜歡”，它將變為“喜歡”，但是我無法再次單擊“喜歡”以使其再次變為“不喜歡”。

我在這里做錯了什么？ 請幫我一個人。

Answer 1

您正在DOM中生成動態元素，因此由於缺少委派而不會附加click事件，因此，請嘗試以下操作：

$("#likeSec").delegate('#like', 'click', function(){
    var res_id=$("#res_id").val();
    $.post("like_recipe_prosses.php",{'data':res_id},function(cbd){
        $("#likeSec *").remove();
        $("#likeSec").html(cbd)
    })
})

$("#likeSec").delegate('#dislike', 'click', function(){
    var res_id=$("#res_id").val();
    $.post("dislike_recipe_prosses.php",{'data':res_id},function(cbd){
        $("#likeSec *").remove();
        $("#likeSec").html(cbd)
    })
})

Answer 2

嘗試這個

$('#likeSec').on('click','yourdiv',function(){
   //Your Code
 });

Answer 3

當您收到ajax響應時，將用事件附加的原始HTML元素替換為新HTML。 使用.on附加委托事件：

$("#likeSec").on("click", "#like", function(){
    var res_id=$("#res_id").val();
    $.post("like_recipe_prosses.php",{'data':res_id},function(cbd){
        $("#likeSec").html(cbd)
    })
})

$("#likeSec").on("click", "#dislike", function(){
    var res_id=$("#res_id").val();
    $.post("dislike_recipe_prosses.php",{'data':res_id},function(cbd){
        $("#likeSec").html(cbd)
    })
})