jQuery, как я могу повторно связать это событие после обратного вызова ajax?

Question

Я пытаюсь создать текстовое редактирование на месте, просто манипулируя селекторами jQuery. Но после первого обратного вызова ajax другие обратные вызовы для того же входного текста больше не работают ...

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());
                }
            });
        });
    }

Мой вопрос: как я могу привязать это ??? Повторное связывание события размытия ... Когда я размываю вводимый текст, во втором обратном вызове ajax ничего не происходит.

спасибо !!

Answer 1

Вы можете использовать jQuery.live , (jQuery 1.3+). Он привязывает обработчик к событию для всех текущих и будущих соответствующих элементов.

Answer 2

Вы присоединяете обработчик "onblur" к элементу, который стирается после обновления ajax. Если вы хотите, чтобы событие сохранялось, просто свяжите его при создании (т.е. на 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 3

Если вы создадите одну функцию, которая настраивает страницу или перепривязывает элементы управления, а затем вызовете эту функцию при успешном вызове Ajax, это может сработать.

EDIT
Попробуйте ...

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
}