jqueryjquery

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

просмотры: 15.6K

Я пытаюсь создать текстовое редактирование самостоятельно, просто манипулируя селекторами 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 ничего не происходит.

Благодарность!!

Источник

Ответов (3)

Решение

Вы прикрепляете "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());
                    }
                });
            });
    });
}
Источник

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

Источник

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

ИЗМЕНИТЬ
Попробуйте ...

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
}
Источник