javascript - 如何使用 jQuery 访问模式对话框中的 id？

Question

我正在尝试使用 jQuery 将 html 的所有内容推送到 jsp。

我做了一个像这样的空div:

<div class="modal fade" id="formModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="formModal_title"></h4>
            </div>

            <div class="modal-body" id="viewDiv">
                <div class="widget-body padding-10" id="modal_container" style="height: 430px; overflow: auto;">

                </div>
            </div>

        </div>
    </div>
</div>

我用其他 html 中的 jQuery.get() 制作了一个 HTML。就像...

    $.get('/resources/news.html', function(data){
        $('#modal_container').append($(data).fadeIn());
    });

    //main_exposure is not important here.
    $('#main_exposure').find('tr').each(function(){
        var nid = $(this).attr('nid');
        var news_cd = $(this).attr('news_cd');
        for(var idx in setting_news_cds){
            if(setting_news_cds[idx] == news_cd){
                console.log(generateHTML($('#' + news_cd).html('')));
            }               
        }
    });

然后我的 console.log() 打印未定义，即使我可以从 chrome Inspector 看到 id 和数据。

经过多次尝试，我发现在“查看页面源代码”(右键单击并在浏览器中“查看页面源代码”)中找不到任何 $.get() 的结果。

是否有任何方法可以访问以动态方式制作的模态女巫中的 id(这意味着 $.get())？

Answer 1

您遇到的新 HTML 未显示在页面源代码中的问题与 get() 函数无关，而是一般通过 JS 进行 DOM 更改。页面源 View 仅显示服务器初始响应的内容。不过，您将在任何检查器和 Firebug 中看到所有更改。

您在查找添加到 DOM 的正确元素时遇到的问题可能是由于您异步添加内容并且尝试在加载元素之前访问这些元素。或者换句话说:您告诉 jQuery get() 内容，并在 get 完全完成之前搜索这些内容。将您想要在新加载的内容上执行的代码放入用于附加 HTML 的回调函数中 - 您传递给 get() 的函数。

更改后您的代码可能如下所示:

$.get('/resources/news.html', function(data){
    $('#modal_container').append($(data).fadeIn());

    //main_exposure is not important here.
    $('#main_exposure').find('tr').each(function(){
        var nid = $(this).attr('nid');
        var news_cd = $(this).attr('news_cd');
        for(var idx in setting_news_cds){
            if(setting_news_cds[idx] == news_cd){
                console.log(generateHTML($('#' + news_cd).html('')));
            }               
        }
    });
});