无法再次更改元素ID

时间:2018-03-05 11:52:58

标签: javascript php jquery forms

我有两个按钮 - 一个用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。有人能帮助我吗?

提前致谢。

1 个答案:

答案 0 :(得分:2)

click()事件仅使用已创建的元素触发。 &#39;取消关注的元素&#39; id是指在绑定时不存在。尝试在()

上使用该事件
$(document).on('click','#follow',function(e){ your code}); 
$(document).on('click','#unfollow',function(e){ your code});