表中的Ajax响应将失去对Modal的访问权限

时间:2015-12-11 02:41:18

标签: jquery ajax twitter-bootstrap-3 bootstrap-modal

内容加载正常,页面刷新动态内容。但是,正在加载的内容包括用于触发具有适当内容的模态的链接。单击该链接后,我将转到一个新页面,其中包含应在模式中加载的内容。当我不通过Ajax注入内容时,触发模态工作正常。

查看源页面时,我看不到源中显示的远程内容。我看到其他所有内容,但表/ div中的tbody为空。

正在加载的页面有此链接

<a href="/host/{{ $k->hostname }}/log/{{ $k->job_id }}" rel="modal"><button type="button" class="btn btn-link"><i class="icon-file-text position-left"></i></button></a>

HTML代码

<div id="refreshme">
    <table>
        <tbody></tbody>
    </table>
</div>

<div id="modal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-info">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h6 class="modal-title" id="sam"></h6>
            </div>
            <div class="modal-body">
                <!-- /# content goes here -->
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
    </div>
</div>

JS代码

$(function() {
    startRefresh();
});

function startRefresh() {
    var environment_id = "{{ $deployment_info->environment_id }}";
    var job_id = "{{ $job_id }}";

    setTimeout(startRefresh,1000);
    $.get('/deploys/' + environment_id + '/info_div/'+ job_id, function(data) {
        $('#refreshMe tbody').html(data);
    });
}


// Modal code
$('a[rel=modal]').on('click', function(evt) {
    evt.preventDefault();
    var modal = $('#modal').modal();
    modal
        .find('.modal-body')
        .load($(this).attr('href'), function (responseText, textStatus) {
            if ( textStatus === 'success' ||
                 textStatus === 'notmodified')
            {
                modal.show();
            }
    });
});

0 个答案:

没有答案