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
– Mina Gabriel

2014-01-21 18:50:10 +00:00
Commented Jan 21, 2014 at 18:50 — Mina Gabriel
– Mina Gabriel, Commented Jan 21, 2014 at 18:50
$("#likeSec *").remove(); is redundant

user400654
– user400654

2014-01-21 18:56:04 +00:00
Commented Jan 21, 2014 at 18:56 — user400654
– user400654, Commented Jan 21, 2014 at 18:56

taxicala · Accepted Answer · 2014-01-21 18:53:03Z

3

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

answered Jan 21, 2014 at 18:53

taxicala

21.8k7 gold badges41 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dima L. Over a year ago

From jquery docs: As of jQuery 1.7, .delegate() has been superseded by the .on() method.. See example with .on() below

Shhade Slman · Accepted Answer · 2014-01-21 18:53:07Z

1

Try this

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

answered Jan 21, 2014 at 18:53

Shhade Slman

2482 silver badges10 bronze badges

1 Comment

Dima L. Over a year ago

From jquery docs: As of jQuery 1.7, .delegate() has been superseded by the .on() method.

Dima L. · Accepted Answer · 2014-01-21 18:55:21Z

1

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

answered Jan 21, 2014 at 18:55

Dima L.

3,63336 silver badges31 bronze badges

1 Comment

Dima L. Over a year ago

From jquery docs: As of jQuery 1.7, .delegate() has been superseded by the .on() method.

Collectives™ on Stack Overflow

Jquery click function not working when using AJAX

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related