javascript - ajax jquery + bootstrap 模式仅在第二次单击时有效

Question

我有一个 Bootstrap 模式，我想用从 ASP.NET MVC 5 操作检索到的数据来填充该模式。

用户单击按钮后，模式应该与操作中的数据一起可见。

第一次单击时，没有任何反应。第二次点击后，每次点击都像魅力一样。

我不明白发生了什么。

在 Chrome 工具中，我可以看到第一次点击生成了带有一些通用文本的错误:

jquery-1.10.2.js:8157 Uncaught TypeError: Cannot read property 'methods' of undefined

按钮:

<button id="addContaButton" class="btn btn-primary btn-sm pull-right"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> conta</button>  

模态:

<div class="modal fade" id="addContaModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-url="@Url.Action("Create","Conta")">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">Criar uma nova conta</h4>
                </div>
                <div class="modal-body" id="add-conta-modal-body">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary">Criar conta</button>
                </div>
            </div>
        </div>
    </div>

JavaScript:

$(document).ready(function () {
    $('#addContaButton').click(function () {
        var url = $('#addContaModal').data('url');

        $.ajax({
            url: url,
            success: function (data) {
                $('#add-conta-modal-body').html(data);
                $('#addContaModal').modal('show');
            },
            async: false,
            error: function (req, status, errorObj) {
                alert("Ocorreu um erro ao tentar criar uma conta. Por favor, entre em contato.");
            }

        });
    });

});

编辑:我发现问题的根源在于我包含的另一个 javascript 以帮助验证，但我不明白为什么它只会导致第一次单击失败。

js是这样的:

$(document).ready(function () {

    $.validator.methods.range = function (value, element, param) {
        var globalizedValue = value.replace(",", ".");
        return this.optional(element) || (globalizedValue >= param[0] && globalizedValue <= param[1]);
    }

    $.validator.methods.number = function (value, element) {
        return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:[\s\.,]\d{3})+)(?:[\.,]\d+)?$/.test(value);
    };

});

Answer 1

我在使用它的验证代码文件之后导入 jquery.validation 文件。