JQuery How can I recover this event after ajax callback?

Question

I am trying to create text editing myself by simply manipulating jQuery selectors. But after the first ajax callback, the other callbacks for the same input text no longer work ...

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 rebuild this ??? Cancel the blur event ... When I blur the input text, nothing happens in the second ajax callback.

thanks!!

Answer 1

You attach a handler "onblur"to the element, which is destroyed after the ajax update. If you want the event to persist, just bind it when it is created (for example, on 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());
                    }
                });
            });
    });
}

Answer 2

jQuery.live, (jQuery 1.3+). .

Answer 3

If you create one function that customizes the page or re-checks the controls and then calls that function on an Ajax call successfully, this might work.

EDIT
Try this ...

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
}