如何在ajax和php中动态创建按钮添加事件处理程序？

Question

I'm developing a social networking site in which I have implemented infinite scrolling. First few elements which are not generated through ajax work fine. Next elements which are created using ajax create a problem. Here is my code in which I make an ajax call:

alert(id);
id--;
load+=1;
$.post("ajax.php",{id:id}, function(data,value){
    $(".posts").append(data);
    $('.loader').hide();            
});

and here is the code which then creates images, comments and likes button dynamically:

<?php 
while($row = $result->fetch_assoc()){
    $sql1 = "select likes from likes where pid='".$row["p_id"]."' ";
    $result1 = $link->query($sql1);
    $row1 = $result1->fetch_assoc();
?>
<img src="<?php echo $row['p_url'];?>" height="400px" width="500px" />
<p class="like" id="<?php echo $row['p_id'];?>"><?php echo $row1['likes']?></p>
<input type="button" value="like" class="btn" id="<?php echo $row['p_id'];?>" />
<input type="text" class="enter_comment  value="comments" id="comm<?php echo $row['p_id'];?>"/><input type="button" value="enter" class="cbtn" id="<?php echo $row['p_id'];?>">
<?php
}
?>

and in the same file I have created onclick event handler:

$(document).ready(function(){
    <!-- like button -->
    $(".btn").click(function(e){
        var id=$(this).attr('id');
        alert("ajax function");
        $.post("like.php",{id:id}, function(k){alert(k);});
    });
});

Now the problem is when all likes in database are 0 and I hit like button of dynamically create like button then it saves 2 likes instead of 1.

Answer 1

For this to work you need to wrap the click even in the .on() function. Anything requiring events that has been loaded via AJAX after the initial page load needs to be done like this otherwise the events don't fire.

$('body').on('click', '.your-css-selector', function(e) {
    //perform task here
}