CODEWITHSUNDEEP
javascriptphpjqueryforms
SHIVANK KACKER
SHIVANK KACKER

Reputation: 11

Cant change element ID again

I have two buttons- one to follow an id by PHP, another to Unfollow. This is my PHP code for that-

 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>';
    }

The forms update the back end through an iframe. My problem was to change the buttons from Follow to Unfollow and Vice Versa. I made a script-

<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>

This serves my purpose, but here is the real problem- When I click on the button once, it gives out desired appearance, but when I again click it, it does not identify the new id, thus does not change it. The problem lies with the JQuery i suppose. Can someone help me?

Thanks in advance.

Upvotes: 0

Views: 63

Answers (1)

carlATR
carlATR

Reputation: 96

The click() event will only be triggered with elements that are created already. The element that the 'unfollow' id is referring to does not exist when you bind it. Try using the event on() 

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

Upvotes: 2

Related Questions