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而是它的副本

val未定义BootstrapDialog

2 个答案: