Question

I have this function:

$(function() {
    $('.upvote').click(function() { voteActions(upvoteID, this.id); } );
    $('.downvote').click(function() { voteActions(downvoteID, this.id); } );
});

If I click the upvote button this event responds and works properly and always does. No problems there. However, I have another button that sorts the submissions by their date added. This re-arranges all the div submissions and after they are re-arranged their respective upvote and downvote icons no longer work. If I add an alert to within the click functions code then it only fires before the divs being sorted. The submissions being sorted for some reason borks the click function. After they are sorted it is no longer called. The odd part is that the sorting works flawlessly. Also, I checked firebug before and after and everything is exactly the same, except in a different order. The ids, names, and classes are all the same but their JQuery functions no longer respond.

I have a feeling that this has something to do with the JQuery file not being reprocessed after re-arranging the submissions but I’m not sure what to do about that. I am still quite new to Javascript and JQuery. Any ideas SO?

Edit: Here is the re-arranging function:

(function($) {
    $.fn.reOrder = function(array) {
        return this.each(function() {
            for (var i = 0; i < array.length; i++)
                array[i][0] = $('div#' + array[i][0]);

            $(this).empty();

            for (var i = 0; i < array.length; i++)
                $(this).append(array[i][0]);
        });
    }
})(jQuery);

Answer 1

I think you might be having two issues

1) Your code might be generated dynamically in that case use live binding , you can refer the same here

http://api.jquery.com/live/

2) Check the class names if they are changing , there won’t be any problem with the jquery.