Как использовать jquery ajax для установки содержимого div, затем вызвать JS из этого div

Question

Я использую 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>

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> и помещение всего кода в обратный вызов success .

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
 });