Question

// i am using bootstrap for design     
$('.unlike-post').on('click',function(){
    var $this = $(this);
    var postid = $this.siblings('.submit-post').attr('post-id');
    console.log('unlike ajax');
    $.ajax({
        type: "POST",
        url: "post_comment.php",
        data: { postid: postid,unlike:'yes'},
        success: function() {$this.removeClass('unlike-post');
            $this.html('Click to like');
            $this.addClass('like-post-fb');

        },
        error: function(){
            $this.siblings('.error').show();
        } 
    }); 
});
// ajax call when calling unlike and change class to like ^^

//ajax call to like post below and change class to unlike

$('.like-post-fb').on('click',function(){
    var $this =$(this);
    var postid = $this.siblings('.submit-post').attr('post-id');
    console.log('like ajax');
    $.ajax({
        type: "POST",
        url: "post_comment.php",
        data: { postid: postid,like:'yes'},
        success: function() { $this.removeClass('like-post-fb');
            $this.html('unlike');
            $this.addClass('unlike-post');
        },
        error: function(){
            $this.siblings('.error').show();
        } 
    }); 
});
//up is my ajax call for both like and unlike on post_comment

<div class='btn-success btn-xs btn <?php if($flag===true){ echo 'unlike-post'; }else{echo 'like-post-fb';}?>'>

    <?php if($flag===true){ echo 'unlike'; unset($flag); }else{echo 'Click to like';}?>

</div>

// in browser it toggle class unlike-post and like-post-fb after ajax success function()
// But it call repeated ajax only to one class which is available after reloading

Answer 1

这个怎么样？

HTML：

<div id="container">  
  <button class="unlike-post">Unlike</button>
</div>

JS：

$('#container').on('click', '.unlike-post', function(){
    // other code  
});

Ajax一次又一次地打电话给同一个班级

1 个答案: