Jquery click function not working when using AJAX

Question

this is my html code

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

and this my script

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

When I click 'like' I see it becomes 'Unlike', but if I click on 'Unlike' it doesn't work. If I then refresh the page and click 'Unlike', it becomes 'Like', but I can not click 'Like' again to make it 'Unlike' again.

What did I do wrong here? please help me someone.

do you get any error in you console ? – Mina Gabriel Jan 21 '14 at 18:50 — Mina Gabriel, Jan 21 '14 at 18:50
`$("#likeSec *").remove();` is redundant – Kevin B Jan 21 '14 at 18:56 — Kevin B, Jan 21 '14 at 18:56

score 3 · Answer 1 · answered Jan 21 '14 at 18:53

You are generating dynamic elements in your DOM, thus the click event wont be attached due to the lack of delegation, in order to make this work, try the following:

$("#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)
    })
})

From jquery docs: `As of jQuery 1.7, .delegate() has been superseded by the .on() method.`. See example with .on() below — Dima L., Jan 21 '14 at 19:03

score 1 · Accepted Answer · answered Jan 21 '14 at 18:53

1

Try this

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

answered Jan 21 '14 at 18:53

Shhade Slman

263
2
10

From jquery docs: `As of jQuery 1.7, .delegate() has been superseded by the .on() method.` – Dima L. Jan 21 '14 at 19:02

score 1 · Answer 3 · answered Jan 21 '14 at 18:55

When you receive ajax response, you replace original HTML elements which had events attached with new HTML. Use .on to attach delegated events:

$("#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)
    })
})

From jquery docs: `As of jQuery 1.7, .delegate() has been superseded by the .on() method.` — Dima L., Jan 21 '14 at 19:01

Jquery click function not working when using AJAX

3 Answers3