0

我正在使用 JQuery 加载 MVC 用户控件的内容：

function menuShowModal(a) {
    $.ajax(
            {
                url: a.href,
                success: function (result) {
                    $('#modalDialog').dialog('close');
                    var $dialog = $('<div id=\'modalDialog\'></div>')
                            .html(result)
                            .dialog({
                                autoOpen: true,
                                title: 'Basic Dialog',
                                modal: true
                            });
                },
                cache: false,
                type: 'get'
            });
    return false;
}

返回的 HTML 如下所示：

<input type="text" id="navnet" value="test" />
        
<script type="text/javascript">
    $(document).ready(
    function () {
        alert($("#navnet").val());
    }
    )
</script>

问题是警报返回“未定义”而不是“测试”，换句话说，JS 在插入 html 之前执行，我该如何解决这个问题？

-- 下面帖子的解决方案是一个回调函数，这是工作代码 --

function menuShowModal(a) {
    $.ajax(
            {
                url: a.href,
                success: function (result) {
                    onDialogBoxShown = null;
                    $('#modalDialog').dialog('close').remove();
                    var $dialog = $('<div id=\'modalDialog\'></div>')
                            .html(result)
                            .dialog({
                                autoOpen: true,
                                title: 'Basic Dialog',
                                modal: true
                            });
                            if (onDialogBoxShown != null) onDialogBoxShown();
                },
                cache: false,
                type: 'get'
            });
    return false;
}

<input type="text" id="navnet" value="test" />
        
<script type="text/javascript">
    var onDialogBoxShown = function () { alert($("#navnet").val()); }
</script>
4

2 回答 2

2

文档已经加载（您插入的片段不是文档），因此您的回调会立即触发。试试这个：

<script type="text/javascript">
    alert($("#navnet").val());
</script>

或者定义一个函数并在插入 html 后显式调用它：

<script type="text/javascript">
    var mycallback = function() { alert($("#navnet").val()); }
</script>

...    

.html(result);
if (typeof window.mycallback == 'function') mycallback();

如果可能，更好的方法是摆脱<script>元素并将所有代码放入成功回调中。

于 2010-03-29T10:14:51.550 回答
0

我认为问题在于，在您调用 dialog() 之前，html 只是在内存中浮动并且没有附加到 DOM，因此您无法通过 ID 在其中找到元素。

这应该有效：

 $('#modalDialog').dialog('close');
 var $dialog = $('<div id=\'modalDialog\'></div>').css('display','none');
 $(document.body).append($dialog);
 $dialog.html(result)
 .dialog({
    autoOpen: true,
    title: 'Basic Dialog',
    modal: true
 });
于 2010-03-29T10:22:27.317 回答