jQuery：来自ajax的表数据的dialog（）未显示

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

        }
    });
});

我有使用ajax导入的JSON api中的数据。 这显示在一个表中，其中的行是使用JS创建的。

在每一行中，都有对用户隐藏的另一行“其他”数据。 在单击一行时，我希望出现一个显示此“其他”数据的对话框。

最初，我尝试通过写出“原始格式”的行来完成此操作（ var row = "<tr><td>...</td></tr>"等），但是我读到这不适用于像我正在尝试执行的javascript函数那样，因为DOM已经设置（我对此不是100％肯定）。 这就是为什么在某些方面我使用JS创建每个元素并正确执行的原因。

但是 ，我仍然无法显示对话框

笔记。 表格下方（硬编码html）是一个空的div，用作出现对话框时的保持器。

在数据静态和不涉及Ajax之前，我已经取得了成功

Answer 1

我找到了解决方案。 似乎未调用JS .on('click', function()或在正确的位置进行注册。我使用chrome dev工具检查了DOM属性，而.referral的onclick属性为null。

相反，我使用函数clicks()设置每个<TR>的onclick属性，如下所示：

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

与，

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