javascript - bootbox.confirm 在 ajax 加载的 div 中立即打开和关闭

Question

我正在使用从http://bootboxjs.com/下载的bootbox 。user_update.php 使用ajax 加载到users.php 的div 中。在 user_update.php 中，我有一个 JavaScript 函数 validateForm()，在同一文档的下面，我有一个调用此函数的表单，如下所示:

<form name= "updateForm" onsubmit="return validateForm()" role="form-horizontal" method="post" action="index.php">

函数 bootbox.alert 工作得很好。

当我使用 bootbox.confirm 时，我看到对话框在零点几秒内打开和关闭。

if (roleid != prevroleid) {
    bootbox.confirm("Are you sure?", function (result) {
        if (result) {
            console.log("User confirmed dialog");
        } else {
            console.log("User declined dialog");
        }
    });
}

当我在未使用ajax加载到div中的div中测试相同的函数时，bootbox.confirm按预期工作。

已编辑
这是 ajax 调用:

$(document).on("click", ".gebruiker", function (e) {
    e.preventDefault();
    //var url = "user_update.php";
    //$("#details").load(url)
    var idnr = $(this).attr('idnr');

    $.ajax({
        type: "get",
        url: "view/user_update.php",
        data: {
            variable1: idnr
        },
        success: function (data) {
            //do stuff after the AJAX calls successfully completes
            $('#details').html(data);

        }
    });
});

这是它被加载的div:

<div id="details" class="col-md-6">         
</div>

于 16:43 添加
根据要求验证表单代码:

<script>
    function validateForm()
    {
        var fullname = $('#fullname').val();
        var username = $('#username').val();
        var role = document.getElementById("role");
        var roleid = role.options[role.selectedIndex].value;

        var password1 = $('#password1').val();
        var password2 = $('#password2').val();
        var prevroleid = $('#prevroleid').val();
      
      
        if (roleid != prevroleid) {
bootbox.confirm("Are you sure?", function (result) {
    if (result) {
        console.log("User confirmed dialog");
    } else {
        console.log("User declined dialog");
    }
});
}    

        
        if (!fullname)
        {
        bootbox.alert("Het veld 'Naam' mag niet leeg zijn")
        return false;
      }
      if (!username)
        {
        bootbox.alert("Het veld 'Gebruikersnaam' mag niet leeg zijn")
        return false;
      }
      
      if(password1 != password2)
      {
        bootbox.alert("De waardes in de wachtwoord velden komen niet overeen")
        return false;
      }
      
     
    }       
</script>

Answer 1

您应该阻止表单在未经验证时的默认行为。

所以 validateForm 应该是这样的:

function validateForm(e)
{
 var valid = false; // do some validation
 if(!valid){
  e.preventDefault();
 }
}

否则，表单将被提交并刷新页面，从而关闭确认对话框。