jQuery: dialog() of table data from ajax not showing

Question

$(function () {
    $('.referral').on('click', function () {
        $('#hold').html($(this).find('DIV').html());
        $('#hold').dialog();
    });
});

$(function getTableData() {
    $.ajax({
        url: 'interface_API.php',
        data: "",

        dataType: 'json',
        success: function (data) {
            setTimeout(function () {
                getTableData()
            }, 1000);
            var body = document.getElementById('tbody');
            body.innerHTML = '';
            for (var i in data) {
                var row = data[i];
                var customerCode = row.CustomerCode;
                var phone = row.PhoneNumber;
                var thetime = row.TimeStamp;

                var tr = document.createElement('TR');
                tr.className += " " + "referral";
                body.appendChild(tr);

                var td = document.createElement('TD');
                td.appendChild(document.createTextNode(customerCode));
                tr.appendChild(td);

                var td = document.createElement('TD');
                td.appendChild(document.createTextNode(phone));
                tr.appendChild(td);

                var td = document.createElement('TD');
                td.appendChild(document.createTextNode(thetime));
                tr.appendChild(td);

                var tr2 = document.createElement('TR');
                body.appendChild(tr2);

                var td2 = document.createElement('TD');
                var divE = document.createElement('DIV');
                divE.className += " " + "extra";
                var text = document.createTextNode("sage, extra, etc");
                divE.appendChild(text);
                td2.appendChild(divE);
                tr2.appendChild(td2);
            }

        }
    });
});

I have data from a JSON api that is imported using ajax. This is displayed to a table, of which the rows are created using JS.

With each row, there is an additional row of 'additional' data that is hidden from the user. on click of a row, i wish for a dialog to appear displaying this 'additional' data.

Initally i tryed todo this with writing out the rows in "raw format" ( var row = "<tr><td>...</td></tr>" etc) however i read that this does not work well with javascript functions like the one i am trying to execute as the DOM has already been set (i'm not 100% sure about that). This is why i use JS to create each element & do it correctly, to some respect.

, i am still unable to get the dialog to appear ，我仍然无法显示对话框

Notes. below the table (html hard coded) is a empty div which is used as a holder for when a dialog is to appear.

I have had success before when the data is static & ajax is not involved

Answer 1

I found the solution. It seems that the JS .on('click', function() was not being called, or registered at the right point. i checked on the DOM properties using chrome dev tools & .referral 's onclick property was null.

Instead, i set the onclick attribute of each <TR> with the function clicks() like so:

var tr = document.createElement('TR');
tr.setAttribute("onclick", "clicks(this)");

With,

function clicks(param){
        $('#hold').html($(param).find('DIV').html());
        $('#hold').dialog();
};