jQuery how can I rebind this event after a ajax callback?

Question

Hi everyone!

I'm trying to create a text edit in place myself just by manipulating jQuery selectors. But, after the first ajax callback, the others callback for the same input text doesn't work anymore...

function editaVal(celDiv, id)
    {
        var novoConteudo = $("<input type='text' id='novoCont" + id + "' value='" + $(celDiv).html() + "' />");
        $(celDiv).dblclick(function()
        {
            $(this).html(novoConteudo);
        });

        $(novoConteudo).blur(function()
        {
            $(novoConteudo).parents("tr").removeClass('trSelected');
            $.ajax({
                type: 'POST',
                url: '/SuperAdmin/SalvaValor/?busca=' + $(novoConteudo).val() + '&codValor=' + id,
                beforeSend: function()
                {
                    $(celDiv).html($("#loading").show());
                },
                success: function()
                {
                    $(celDiv).html($("#loading").hide());
                    $(celDiv).html(novoConteudo.val());
                }
            });
        });
    }

My question is: how can i rebind this??? Rebind the blur event... When I blur the input text, nothing happens on the second ajax callback.

thanks!!

Answer 1

You could use jQuery.live, (jQuery 1.3+). It binds a handler to an event for all current and future matched elements.

Answer 2

If you create a single function that sets up the page or rebinds the controls and then call that function on Success of the Ajax call, that may work.

EDIT
Give this a try...

success: function()                
{                    
     $(celDiv).html($("#loading").hide());                    
     $(celDiv).html(novoConteudo.val());     
     ConfigMyInputs();           
}

function ConfigMyInputs()
{
     //foreach item
     //configure double click
     //configure blur
}

function MakeMyAjaxCall() {
    //AJAX CODE HERE
}

Answer 3

You're attaching a "onblur" handler to an element that gets wiped out after the ajax update. If you want the event to persist, just bind it when you create it (ie on the dblclick):

function editaVal(celDiv, id)
{
    $(celDiv).dblclick(function()
    {
        var text = $(this).html();
        var novoConteudo = $('<input type="text" />')
            .appendTo($(this).empty())
            .attr('id', 'novoCont' + id)
            .val(text)
            .blur(function()
            {
                $(this).parents("tr").removeClass('trSelected');
                $.ajax({
                    type: 'POST',
                    url: '/SuperAdmin/SalvaValor/?busca=' + $(this).val() + '&codValor=' + id,
                    beforeSend: function()
                    {
                        $(celDiv).html($("#loading").show());
                    },
                    success: function()
                    {
                        $(celDiv).html($("#loading").hide());
                        $(celDiv).html(novoConteudo.val());
                    }
                });
            });
    });
}