Question

I’ve got the following code:

$("#another").click(function() {
    $('#another').replaceWith('<a id="another" class="btn btn-primary btn-mini disabled"><i class="icon-refresh icon-white"></i>&nbsp;Loading...</a>');
    $.get('another.php', { 'cycle' : i }, function(data) {
        $('tbody').append(data);
        $("#another").replaceWith('<a id="another" class="btn btn-primary btn-mini"><i class="icon-plus icon-white"></i>&nbsp;Load another cycle</a>');
    });
    i++;
});

When I click the element with the id of another, it loads once. After one click, it won’t work again.

Answer 1

If you replace the element with another, all listeners will be removed. To avoid this you either add the listener again to the new element

$('#another').bind('click', function() {
  //do something
});

or move the code to a function and add a onclick attribute to your element.

onclick="my_function();"

in your current javascript it would be

$('#another').replaceWith('<a id="another" class="btn btn-primary btn-mini disabled" onclick="my_function();"><i class="icon-refresh icon-white"></i>&nbsp;Loading...</a>');