无法再次更改元素ID

Question

我有两个按钮 - 一个用PHP跟随id，另一个跟随Unfollow。这是我的PHP代码 -

 if(!mysql_num_rows($result)) {
        echo '
        <form method="post" action="includes/follow.php" target="action" id="followform">
        <input type="hidden" name="following" value="'. $row['id'].'"></input>
        <input type="hidden" name="follower" value="'.$info->id.'"></input>
        <input type="hidden" name="following_name" value="'. $row['username'] .'"></input>
        <input type="hidden" name="following_img" value="'. $row['u_imgurl'].'"></input>
        <button class="Follow_button" id="follow" type="submit"><table><tr><td>Follow</td><td> <img src="img/system/plus.png" width="20px"></td></tr></table></button>
        </form>';
    } else {
        echo '
        <form method="post" action="includes/unfollow.php" target="action" id="unfollowform">
        <input type="hidden" name="following" value="'. $row['id'].'"></input>
        <input type="hidden" name="follower" value="'.$info->id.'"></input>
        <input type="hidden" name="following_name" value="'. $row['username'] .'"></input>
        <input type="hidden" name="following_img" value="'. $row['u_imgurl'].'"></input>
        <button class="Follow_button" id="unfollow" type="submit"><table><tr><td>UnFollow</td><td> <img src="img/system/cross.png" width="20px"></td></tr></table></button>
    </form>';
    }

表单通过iframe更新后端。我的问题是将按钮从Follow更改为Unfollow和Vice Versa。我做了一个剧本 -

<script>
    $('#follow').click(function(e){ 
     setTimeout(function () {
        $('form#followform').attr('action', 'includes/unfollow.php');
        $("#follow").html("<table><tr><td>UnFollow</td><td> <img src='img/system/cross.png' width='20px'></td></tr></table>");
        $('button#follow').attr('id', 'unfollow');
    }, 50);

    });
    $('#unfollow').click(function(e){ 
     setTimeout(function () {
        $('form#unfollowform').attr('action', 'includes/follow.php');
        $("#unfollow").html("<table><tr><td>Follow</td><td> <img src='img/system/plus.png' width='20px'></td></tr></table>");
        $('button#unfollow').attr('id', 'follow');
    }, 50);

    });
</script>

这符合我的目的，但这是真正的问题 - 当我单击按钮一次时，它会给出所需的外观，但是当我再次单击它时，它不会识别新的ID，因此不会更改它。我认为问题在于JQuery。有人能帮我吗？

提前致谢。

Answer 1

click（）事件仅使用已创建的元素触发。绑定它时，'unfollow'id引用的元素不存在。尝试使用（）上的事件

$(document).on('click','#follow',function(e){ your code}); 
$(document).on('click','#unfollow',function(e){ your code});