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文件。

ajax jquery + bootstrap模式仅适用于第二次单击

1 个答案: