Невозможно выполнить функции для элементов, загруженных с помощью AJAX (jQuery)

Question

Я использую .prepend () для загрузки данных после того, как я отправил форму с помощью .ajax ().

после добавления новых элементов мои функции на них работать не будут.

если я связываю js-файл непосредственно в предварительно добавленных данных, функции работают, но когда я POST, я начинаю умножать события.

У меня такое ощущение, что это как-то связано с привязкой, но я не могу точно понять, как с этим справиться.

есть идеи?

спасибо!

Answer 1

создайте функцию, которая инкапсулирует логику jEditable следующим образом:

function initjEditable(){
    $('.review_edit').editable('edit_review.php', {
         indicator : 'Saving...',
         tooltip   : 'Click to edit...'
    });

    $('.review_edit_area').editable('edit_review.php', { 
         type      : 'textarea',
         cancel    : 'Cancel',
         submit    : 'OK',
         indicator : '<img src="/hrt/images/indicator.gif">',
         tooltip   : 'Click to edit...'
    });
}

затем вызовите эту функцию из нескольких мест. во-первых, сделать это обратным вызовом из оператора onclick .load ссылки Blurbs следующим образом:

$('#adminContainer').load('blurbs.php',function(){ initjEditable(); });

, который обеспечит запуск в первый раз, не входя в функцию $ (document) .ready ().

второе место будет в функции успеха вашего .ajax-вызова для добавления объявления. будет выглядеть так:

$.ajax({
    type: 'POST',
    url: "add_review.php",
    data: $(this).parent().serialize(),
    dataType: "html",
    success: function(data){
        $("#results").prepend(data);
        initjEditable();
        $('#addForm').reset();
        $('#add').hide('fast');
    }
});

Я полагаю, что вам нужно сделать то же самое с функцией loadBlurbs, когда она тоже работает. это должно поддерживать все работоспособность с редактируемым плагином, не перезагружая скрипт 100 раз.

Разве я имел смысл в то время?