javascript - 使用 BootstrapDialog 未定义的值

Question

我正在使用库 BootstrapDialog，在我的页面中我有一个这样的输入字段：

<div id="divtoload" style="display: none;">     
    <div align="center">
        <table>
            <tr>
                <td align="left" width="100px">input:</td>
                <td align="left"><input id="inputText" name="inputText" type="text"/></td>
            </tr>
        </table>
    </div>
</div>

在同一页面中，我有：

$("#link").click(function()   { 
    var element = $('<div></div>').load('index.html #divtoload', function() {
        element.find('#divtoload').show();
    }); 

    BootstrapDialog.show({
            title: 'Recovery',
            message: element,
            buttons: [{
                label: 'Send',
                cssClass: 'btn-primary',
                action: function(){
                    console.log($("#inputText").val());
                 }
            }]

    })
})

但是 console.log 说 inputText 是未定义的。

Answer 1

JQuery 的 'load' 方法是异步的，这意味着 JS 在运行 BootstrapDialog 代码之前不会等待它完成。因此，它不会在创建对话框之前返回 HTML 并加载它。

将对话框代码放在回调中应该可以修复它：

$("#link").click(function()   { 
var element = $('<div></div>').load('index.html #divtoload', function() {
    element.find('#divtoload').show();

    BootstrapDialog.show({
            title: 'Recovery',
            message: element,
            buttons: [{
                label: 'Send',
                cssClass: 'btn-primary',
                action: function(){
                    console.log($("#inputText").val());
                 }
            }]

    })


}); 

};

Answer 2

问题解决了！

发生了一件奇怪的事情，BootstrapDialog 没有使用我定义的 div 而是它的副本