jQuery / Ajax - Follow / Unfollow按钮,重复功能

时间:2013-07-23 10:32:38

标签: php javascript jquery ajax function

我正在尝试创建一个Follow / Unfollow按钮,它可以重复执行两种方式而无需刷新页面。它的功能完美,如果我单击“关注”,它会通过我的PHP文件将跟随数据添加到数据库,然后在其中显示“取消关注”按钮,反之亦然,这一切都很好。但是,一旦它显示相反的按钮,我不能点击它,直到我刷新页面?我怎样才能使每个功能按照我想要的方式同时对每个按钮起作用?

的jQuery / AJAX:

<script>
$(function() {
$(".followUser").click(function() 
{
var userid = $(this).attr("id");
var dataString = 'userid='+ userid ;
var parent = $(this);

$("#followButton").fadeOut(300);
$.ajax({
type: "POST",
url: "follow.php",
data: dataString,
cache: false,

success: function(html)
{
$("#followButton").html('<button id="' +userid '" name="unfollow" class="btn btn-danger unfollowUser">Unfollow</button>');
$("#followButton").fadeIn(300);

} 
});
return false;
 });
});

$(function() {
$(".unfollowUser").click(function() 
{
var userid = $(this).attr("id");
var dataString = 'userid='+ userid ;
var parent = $(this);

$("#followButton").fadeOut(300);
$.ajax({
type: "POST",
url: "unfollow.php",
data: dataString,
cache: false,

success: function(html)
{
$("#followButton").html('<button id="' +userid '" name="follow" class="btn btn-info followUser">Follow</button>');
$("#followButton").fadeIn(300);

} 
});
return false;
 });
});
</script>

HTML:

<div id="followButton">

    //if isn't following
    <button id="1" name="follow" class="btn btn-info followUser">Follow</button>

    //if is following
    <button id="1" name="unfollow" class="btn btn-danger unfollowUser">Unfollow</button>

</div>

2 个答案:

答案 0 :(得分:2)

在文档加载时,您可以在php脚本生成的按钮上设置按钮单击功能。

但是在ajax success上,您正在使用新按钮替换#followButton的内容。所以以前的.click就丢失了。

您有多种选择:

  1. 创建新按钮后添加onClick事件
  2. 在您的关注/取消关注按钮上简单使用fadeIn / fadeOut

答案 1 :(得分:0)

Use show hide on clicking on like button show unlike and hide like and vice-versa. then it will work fine

$("#hide").click(function(){
  $("tagname").hide();
});

$("#show").click(function(){
  $("tagname").show();
});

hope it will help you