Display external link in modal panel

Question

I have searched for this issue and although some of the solutions work none of them fit my issue.

I am creating links dynamically using ajax calls. When any of the links (styled as button) is clicked I need to show http:\\<IP-address> in the modal.

When links are created and I use "inspect" and copy what is rendered and paste it on top of the page and click it, it does show the content in modal pop up, so I know the script that displays content in modal works. But when I click on actual, dynamically created, links it opens the pop up with no content.

Here is a watered down version of what I have and what I have tried:

Modal popup:

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

This works, when I add the link manually; what I actually see when I click on the ajax-created link/button and select "inspect":

<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>

Can anyone see what am doing wrong or what I am missing?

Answer 1

So, if you are adding the button dynamically after the page loads, you'll need to target the document with your click handler like this:

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

This is because when your page loads all of your Jquery handlers are attached to the DOM. If the element doesn't exist, then you are attaching them to nothing basically.