通过jquery帖子加载表单后 formValidation.io 不起作用

Question

我的代码遇到了一些问题。基本上我有以下问题：

.JS

function {
    $.post( "form.php",function( data ) {
        $("#div_element").html( data );
    } );
}
$(document).ready(function() {
    $('#mybtn').on('click', function() {
        $('#myform').bootstrapValidator('validate');
    });
});

$(document).ready(function() {
    $('#myform').bootstrapValidator({
        framework: 'bootstrap',
        excluded: [':disabled', ':hidden', ':not(:visible)'],
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            subject: {
                validators: {
                    notEmpty: {
                        subject: 'This field is required'
                    }
                }
            }
        }
    })
    .on('success.form.bv', function(e) {
        //do something
    });
});

PHP（表单.php）

<form id="myform">
<div class="form-group">
<label class="col-sm-2 control-label">Subject</label>
<div class="col-sm-3">
    <input type="text" class="form-control" name="subject" id="subject">
</div>
</div>
<div class="form-group">
<div class="col-sm-2 col-sm-offset-2">
    <button type="button" id="mybtn" class="btn btn-default">Send</button>
</div>
</div>

.HTML

<div id="div_element"> 
</div>

好的，事情是在我的 html 代码中通过 ajax 加载表单后，按钮不会在单击时验证表单，所以，我一直在到处寻找，我发现了与委派有关的东西，但不幸的是没有成功。

例如：

$(document).ready(function() {
    $('#div_element').on('click','#mybtn', function() {
        $('#myform').bootstrapValidator('validate');
    }); 
});

那么，有没有人知道如何在加载后通过带有 formvalidatio.io 插件的 jquery post 在 HTML 代码中加载新内容后验证表单？

谢谢。

Answer 1

我遇到了同样的问题，来到这里，很沮丧，没有答案。经过几个小时的尝试，我解决了它。

使用AJAX（通过axios），我使用以下方法在页面上插入表单和JS：

$("#content_area").html(response.data);

为了让JS看到新表单，我最终整理了我需要等待DOM更新的问题。 无法使用 document.ready，因为文档已准备就绪。无法使用 DOM 加载的命令，因为 DOM 已加载。最终，我最终使用了一个 defer 函数来使其工作。

function defer(method) {
    if (window.jQuery) {
        method();
    } else {
        setTimeout(function() { defer(method) }, 50);
    }
}

然后是表单验证器代码：

defer(function () {
    $('#my_form').formValidation({
        ...
    })
})

这允许 DOM 完全加载，并且 formValidation 可以找到它，然后工作。