Question

I have this function to create a request to another file to update the database:

$('#thumb-up').live('click', function() {
    $('#loading').show();

    $.ajax({
            context: this,
            type: 'GET',
            url: '/gallery/configurations/required/photo-thumbs.php',
            data: 'i=21&t=1',
            success: function() {
                                  $('#loading').hide();
                                  $(this).attr('id', 'thumbup-undo').text('Sluta gilla');
                                  $('#thumbup-count').load('/gallery/configurations/required/thumbup-count.php?i=21&t=1');
                                 }
    });
});

$('#thumbup-undo').click(function() {
    alert('das');
});

When I click on the link with the id thumb-up the text changes to “Sluta gilla” as expected. When I now have clicked on this link the ID for the same a tag will be changed from thumb-up to thumbup-undo and the alert “dsa” will appear. The problem here is that it does not appear! I don’t even know if it changes to thumbup-undo but I expect that it does not.

You can try the code here (I have shortened the code to make the demo work properly).

How can I fix this problem?

Thanks in advance

Answer 1

$('body').on('click','#thumb-up', function() {
    $('#loading').show();

    $.ajax({
            context: this,
            type: 'GET',
            url: '/gallery/configurations/required/photo-thumbs.php',
            data: 'i=21&t=1',
            success: function() {
                                  $('#loading').hide();
                                  $(this).attr('id', 'thumbup-undo').text('Sluta gilla');
                                  $('#thumbup-count').load('/gallery/configurations/required/thumbup-count.php?i=21&t=1');
                                 }
    });
});

$('body').on('click','#thumbup-undo', function() {
    alert('das');
});

You have to use ON, since a “new” element is added to the dom after page load. remember .live is deprecated in the latest versions of Jquery