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

使用AJAX时，Jquery单击功能不起作用

3 个答案: