Question

我正在使用JQuery加载mvc usercontroll的内容：

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之前执行的，我该如何解决这个问题呢？

- 来自post post的解决方案是回调函数，这是工作代码 -

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>

Answer 1

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

<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>元素并将所有代码放入成功回调中。

Answer 2

我认为问题在于，在调用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
 });

如何使用jquery ajax设置div的内容，然后从该div调用JS

2 个答案: