javascript - 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()，我必须做什么？

非常感谢您的回答。

劳拉

Answer 1

您的表单在通过 ajax 重新加载后失去了与 DOM 的绑定(bind)，因此先前绑定(bind)到注入(inject)到页面中的元素的事件处理程序将丢失。

我通常会建议使用事件委托(delegate) live , 但它不支持 change 事件，所以一个安全的选择是使用回调作为 $.load 函数的第二个参数重新绑定(bind):

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