使用BootstrapDialog未定義val

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的“加載”方法是異步的，這意味着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，而是使用它的副本