通过 ajax 在 bootstrap 模态中加载的表单不起作用

Question

我有一个模式，其内容（表单输入）是使用 ajax 调用从第二个 html 文档加载的。我需要验证表单，为此我尝试实施 jquery 验证。如果表单未加载 ajax 它可以正常工作（请参阅我的 jsbin，该插件可以正常工作并且它还在执行 ajax 调用以验证名称），但因为我需要它（在模态中），它不是。控制台显示：cannot read 属性 of 'settings' of undefined.

再次感谢您的帮助。

这是我的 jsbin：http://jsbin.com/nodavibexa/1/edit?html,js,console,output

下面是我的脚本（精简版）：

$(document).ready(function () {
    $("#customerAddressForm").validate({
        rules: {
            field1: {
                required: true
            }
        },
        messages: {
            field1: "Please specify your name"

        }
    });

    $('#btn').click(function () {
        var isAdd = $('#customerAddressForm').prop("action").split("/").pop();
        console.log(isAdd);
        if (isAdd == "shipping") {
            console.log("A");
            $('#field1').rules("add", {

                required: true,
                remote: {

                    url: "https://localhost:8443/mysite/myaccount/addresses/isExistingAddressName",
                    contentType: "application/json; charset=utf-8",
                    data: {
                        customerId: function () {
                            return $("#customerId").val();
                        }


                    }
                }
            });
        } else {
            console.log("B");
            $('#field1').rules("add", {
                required: true,
                remote: {
                    url: "https://localhost:8443/mysite/myaccount/addresses/isExistingAddressName",
                    contentType: "application/json; charset=utf-8",
                    data: {
                        customerAddressId: "-10"
                    }
                }
            });
        }
        $("#customerAddressForm").valid();
    });
});

Answer 1

也许它在使用 $(document).ready() 时不起作用，因为触发此事件时元素不存在？

尝试使用

$(document).on("ajaxComplete", function(){ # rest of your code # });