javascript - 在模态面板中显示外部链接

Question

我已经搜索过这个问题，尽管有些解决方案有效，但没有一个适合我的问题。

我正在使用 ajax 调用动态创建链接。单击任何链接(样式为按钮)时，我需要显示 http:\\<IP-address>在模态中。

创建链接并使用“检查”并复制呈现的内容并将其粘贴到页面顶部并单击它时，它确实会在模式弹出窗口中显示内容，所以我知道以模式显示内容的脚本作品。但是，当我单击实际的动态创建的链接时，它会打开没有内容的弹出窗口。

这是我所拥有和尝试过的内容的淡化版本:

模态弹出窗口:

<div class="modal fade" id="printerInfoModal" role="dialog" aria-labelledby="mainModalLabel" aria-hidden="true">
    <div class="modal-dialog fade in">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">
                    <asp:Label ID="lblModalTitle" runat="server" ClientIDMode="Static" Text=""></asp:Label></h4>
            </div>
            <div class="modal-body">
                <iframe src="" id="modeliframe" style="zoom:0.60" frameborder="0" height="250" width="99.6%"></iframe>
            </div>
            <div class="modal-footer">
                <button id="btnCloseModal" class="btn btn-info" data-dismiss="modal" aria-hidden="true" aria-label="Close">Close</button>
            </div>
        </div>
    </div>
</div>        

// Get a list of printers and for each get its status, printer property includes IP address
$.ajax({
    type: "POST",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    url: "Services/ps.asmx/GetPrinterMapping",
    cache: false,
    data: "",
    success: function (response) {
        if (response !== "") {
            try {
                jResponse = JSON.parse(response.d);
                    $.each(jResponse, function (index, value) {
                        var printer = value;

                        $.ajax({
                            type: "POST",
                            dataType: "json",
                            contentType: "application/json; charset=utf-8",
                            url: "Services/ps.asmx/GetPrinterStatus",
                            cache: false,
                            data: JSON.stringify({ PrinterHostnameIPAddress: printer.IPAddress }),
                            success: function (result) {
                                if (result !== "") {
                                    var printerIP = 'http://' + printer.IPAddress;
                                    //var redir = 'openInfo("' + printerIP + '")';

                                    if (status == "Ready") {
                                        $('<div/>', { class: 'col-sm-2' })
                                            .append($('<a/>', { id: 'printer' + printer.IDN, class: 'form-control btn btn-success btn-block extLink', style: 'margin-bottom:5px', href:printerIP, text: status.replace(/\"/g, '') }))
                                            .appendTo($('#printerStatusTable'));
                                        // Not sure if below two lines work!
                                        //It seems I cnnot add data-target: 'xxx' in attributes list part of "append"
                                        $('#printer' + printer.IDN).attr('data-target', '#printerInfoModal');
                                        $('#printer' + printer.IDN).attr('data-toggle', 'modal');

                            },
                            error: function (result) {
                            },
                            failure: function (result) {
                            }
                        });
                    })
$('#printerStatusTable').find('a').attr('data-target', '#printerInfoModal');
$('#printerStatusTable').find('a').attr('data-toggle', 'modal');

// Another think I tried
$('#printerStatusTable').find('a').attr('onclick', 'blah(' + $(this).attr('href') + ');');

JS:

// this function is hit if I copy/paste the html of the the link/button and click it; otherwise it is not called
$('.extLink').click(function (e) {debugger
    e.preventDefault();
    var frametarget = $(this).attr('href');
    //clearIframe();
    targetmodal = '#printerInfoModal'; 
    $('#modeliframe').attr("src", frametarget );   
});

function blah(){debugger
    var frametarget = $(this).attr('href');
    targetmodal = '#printerInfoModal'; 
    clearIframe();
    $('#modeliframe').attr("src", frametarget );   
}

function blah(frametarget){debugger
    //var frametarget = $(this).attr('href');
    targetmodal = '#printerInfoModal'; 
    clearIframe();
    $('#modeliframe').attr("src", frametarget );   
}

function clearIframe() {
    var iframe = $('#modeliframe');
    var html = "";

    iframe.contentWindow.document.open();
    iframe.contentWindow.document.write(html);
    iframe.contentWindow.document.close();
}

当我手动添加链接时，这有效；当我单击 ajax 创建的链接/按钮并选择“检查”时，我实际看到的内容:

<a class="form-control btn btn-block extLink btn-success" id="printer10" style="margin-bottom: 5px;" href="http://1.2.3.4" data-toggle="modal" data-target="#printerInfoModal">Ready</a>

任何人都可以看到我做错了什么或我错过了什么吗？

Answer 1

因此，如果您在页面加载后动态添加按钮，则需要使用点击处理程序来定位文档，如下所示:

  $(document).on('click', '.extLink', function() {
    // Do what you want when the button is clicked.
  });

这是因为当您的页面加载时，所有 Jquery 处理程序都附加到 DOM。如果该元素不存在，那么您基本上将它们附加到任何东西上。