如何使用jQuery访问模态对话框中的id?

时间:2014-11-18 13:02:54

标签: javascript jquery html modal-dialog

我试图用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()打印undefined,即使我可以看到来自chrome Inspector的id和数据。

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

有没有办法以动态方式访问模态巫婆中的id(这意味着$ .get())?

1 个答案:

答案 0 :(得分:0)

您在页面源中未显示新HTML时遇到的问题与get()函数无关,但在DOM中通常通过JS进行更改。页面源视图仅显示服务器的初始响应所带来的内容。您将在任何检查器和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('')));
            }               
        }
    });
});