Событие change не запускается на формах, загруженных ajax

Question

У меня есть HTML-документ с кодом jquery

    $(function(){
[...]
     $("#newNotice").click(function(){
        $("#properties").load("testDiagramm.html #NoticeForm");
        return false;
       });
     function showFormValues(){
        var s = $("form").serialize();
        [... Do things ...]
     }
     $("input, textarea").change(showFormValues);
    });

В начале в HTML-документе нет формы. Но я загружаю разные формы в документ. Один из этих запросов вы можете увидеть здесь

$("#properties").load("testDiagramm.html #NoticeForm");

Проблема в том, что кодовая строка

$("input, textarea").change(showFormValues);

только огонь, когда форма была загружена в начале. Что мне делать, если я хочу выполнить функцию showFormValues ​​(), когда я что-то изменил в формуле, которую я загружаю позже?

Большое спасибо за ваши ответы.

Lara

Answer 1

Ваша форма теряет привязку к DOM после перезагрузки через ajax, поэтому обработчики событий, ранее привязанные к элементам, которые вставляются в страницу, теряются.

Обычно я бы предложил использовать делегирование событий с live , но оно не поддерживает событие change, поэтому безопаснее было бы выполнить повторное связывание с использованием обратного вызова в качестве второго параметра функции $ .load

    $(function(){
[...]
     $("#newNotice").click(function(){
        $("#properties").load("testDiagramm.html #NoticeForm", function() {
            $("input, textarea").change(showFormValues);
        });
        return false;
       });
     function showFormValues(){
        var s = $("form").serialize();
        [... Do things ...]
     }
     $("input, textarea").change(showFormValues);
    });