Why Execute same function after changed ID of a link?

Question

I'm trying to create a add/remove favorite with jquery and php. The addfavorite function works but when i change the id attribute of the link from addfavorite to removefavorite it doesn't work. The id changed but it still doing addfavorite function. If i open firebug i see that the ID changed in id="removefavorite", but when i open the page source it didn't change ID='addfavorite'

Ho can i change with jquery the ID of a link even in the dom?

JQUERY:
$(document).ready(function() {
$('#addfavorite').click(function() {
    id = $('#item').attr('value');
    $.ajax({
        type: "POST",
        url: "http://127.0.1.1/zend/fm/public/video/addfavorite",
        data: "id_video="+id,
        cache: false,
        async: false,
        success: function(result) {
            $('#addfavorite').attr('id','removefavorite');
            $('#removefavorite').text('Remove from favorite');
        getRating(text);
        },
        error: function(result) {
            alert("some error occured, please try again later");
        }
    });
});

$('#removefavorite').click(function() {
    id = $('#item').attr('value');
    $.ajax({
        type: "POST",
        url: "http://127.0.1.1/zend/fm/public/video/removefavorite",
        data: "id_video="+id,
        cache: false,
        async: false,
        success: function(result) {
            $('#removefavorite').attr('id','removefavorite');
            $('#removefavorite').text('Remove from favorite');
        getRating(text);
        },
        error: function(result) {
            alert("some error occured, please try again later");
        }
    });
});
)};

HTML:
<a href="javascript:void(0)" id="addfavorite">
    Add to favorite
</a>

Answer 1

$('#addfavorite').toggle(function() {
     id = $('#item').attr('value');
     $.ajax({
        type: "POST",
        url: "http://127.0.1.1/zend/fm/public/video/addfavorite",
        data: "id_video="+id,
        cache: false,
        async: false,
        success: function(result) {
            $('#addfavorite').text('Remove from favorite');
            getRating(text);
        },
        error: function(result) {
            alert("some error occured, please try again later");
        }
     });
   }, function() {
     id = $('#item').attr('value');
     $.ajax({
        type: "POST",
        url: "http://127.0.1.1/zend/fm/public/video/removefavorite",
        data: "id_video="+id,
        cache: false,
        async: false,
        success: function(result) {
            $('#addfavorite').text('Remove from favorite');
            getRating(text);
        },
        error: function(result) {
            alert("some error occured, please try again later");
        }
     });
   });

Don't change id of an element just change the label. I think it will help you.

Answer 2

First of all, how many links using the ID attribute you will be using? Remember that ID is just for a single element. I would recommend you to do this using a toggle function http://api.jquery.com/toggle-event/ .

I guess the code is not working because you used .click event instead of .live event, and the #removefavorite event does not exist when you bounded it to the click event (because it's #removefavorite). Also remember that events are assigned to elements, so the element can change the attributes and still retain the event. You can unbind the first click event before you assign the other one if you don't want do it with toggle or live functions.

Also, Firebug shows modified DOM on the fly, that's why you can see it changed. When you do a view source, you are viewing the original HTML document that you downloaded (without any javascript changing it).

I also recommend you to use the FireQuery extension for Firefox: It will show you the binded events to that element (amongst other useful data if you are developing in jQuery)

Hope my first post helps you :)

Answer 3

Ok, the answer is that you bind your click functions after the document has loaded in $(document).ready(function() { ... }.

So indeed you change your ID of the link if the Ajax call was made successfully, and this should work. I cannot spot any errors in that. The thing is that you do not refresh your triggers. So even though the ID has changed on the element, the previous trigger is still bound to it. So the way to solve it is to refresh the triggers by redoing the $('#removefavorite').click(function() { ... } );

Write another function for that though, because you cannot nest it 1290383948 times in each other. ;-)

Here is an example I quickly made in JSFiddle: http://jsfiddle.net/S2ERT/ It's not properly coded as I did this in 1 minute but you'll catch the idea.