Question

I want to bind an element with a function via live() method.
The function excecutes just fine only for the first time.
I think that I have to unbind this element from any events and rebound the same function but I don’t know how to do it!

Here is the code:

var temp = function() {
    var htmlEx = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";

    $('#template_loading').fadeIn();
    $('#template_loading').queue(function() {
        $('#tp_prev').html(htmlEx);
        $('#template_container').removeClass("cur_temp");
        $('#template_container').addClass("cur_prev");
        $('#template_container').animate({"margin-left" : "0"}, 400, 'easeOutExpo');    
        $('#template_container').queue(function() {
            $('#template_loading').fadeOut();               
            $('#tp_cur').empty();               
            $('#template_container').removeClass("cur_prev");
            $('#template_container').addClass("cur_temp");  
            $('#tp_prev').empty();              
            $('#tp_cur').html(htmlEx);
            $('#tp_cur').queue(function() {
                $('#prev.pers_arrow').die();
                $('#prev.pers_arrow').live("click", temp);
                $(this).dequeue();
            });
            $(this).dequeue();
        });
        $(this).dequeue();
    });
};

$('#prev.pers_arrow').live("click", temp); 

Answer 1

the first: NEVER, EVER, EVER do like that.

You have to cache your data and don’t jump all time into the dom!!!

second:
in my opinion live is deprecated -so you can use on and off

try that:

var prev=$("#prev");
var pers_arrow=".pers_arrow";
    var temp = function() {
    var htmlEx = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
    var template_loading=$('#template_loading');

    template_loading
        .fadeIn()
        .queue(function() {
            $('#tp_prev').html(htmlEx);
            var template_container=$('#template_container');
            template_container
                .removeClass("cur_temp")
                .addClass("cur_prev")
                .animate({"margin-left" : "0"}, 400, 'easeOutExpo')
                .queue(function() {
                    template_loading.fadeOut();               

                    template_container.removeClass("cur_prev").addClass("cur_temp");  
                    $('#tp_prev').empty();    
                    //you can don't use it - because .html() method already will clean container         
                    //$('#tp_cur').empty();      
                    $('#tp_cur').html(htmlEx).queue(function() {
                        prev.off("click",pers_arrow,temp).on("click",pers_arrow,temp);
                        $(this).dequeue();
                    });
                    $(this).dequeue();
                });
            $(this).dequeue();
        });
};
prev.off("click",pers_arrow,temp).on("click",pers_arrow,temp)