jquery - 如何等待加载了 jquery .load() 函数的 Bootstrap 模式对话框的完全加载

Question

我的网站上有几个 Bootstrap 模态，我这样加载它们:

function modal_density(){
    $("#modal-content").load("pages/modals/density_control.php");
    $('#all_modal').modal('show');
}

然后我像这样关闭它们:

function close_modal(){
    $("#modal-content").empty();
    $('#all_modal').modal('hide');
}

我想将焦点放在模态的输入上，但我认为当我尝试这样做时模态未完全加载:

function modal_density(){
    $("#modal-content").load("pages/modals/density_control.php");
    $('#all_modal').modal('show');
    $("#element").focus();//<----Added part
}

如何等待我的元素完全加载？

---

[编辑]:我试过了，但没用:

function modal_controle_densite_valid(){
    $("#modal-content").load("pages/modals/controle_densite_validation.php", function() {
        $('#all_modal').modal('show');
        $("#codebarre").focus();
    });
}

但是下面的代码在 2 秒后开始工作:

function modal_controle_densite_valid(){
    $("#modal-content").load("pages/modals/controle_densite_validation.php", function() {
        $('#all_modal').modal('show');
        setTimeout(function() {$("#codebarre").focus()}, 2000);
        //$("#codebarre").focus();
    });
}

Answer 1

load() 方法有第二个参数，它允许您提供一个函数，该函数应在 AJAX 请求完成时执行。试试这个:

function modal_density(){
    $("#modal-content").load("pages/modals/density_control.php", function() {
        $('#all_modal').modal('show').on('shown', function() {
            $("#codebarre").focus(); 
        });
    });
}