javascript - 在其 in dom 之前创建 onClick 事件

Question

我有一个将 html 推送到数组中的函数，完成后它返回 html，并且 html 由另一个使用 jQuery 的 .html 的函数推送到 dom。

推送 html 的函数有一个参数，该参数包含一个在单击表格时应调用的方法。

但是当我尝试使用 onclick 时，它会将我的函数呈现为字符串（函数的全部内容）。

我究竟做错了什么？

function GenerateTapHeader(TabName, clickCallbackFunction) {
    var tmpTapHeaderHTML = new Array();

    tmpTapHeaderHTML.push('<table id="Table_' + TabName + '" class="TapHeader" onclick="' + clickCallbackFunction + '">');
    tmpTapHeaderHTML.push('<tr>');
    tmpTapHeaderHTML.push('<td></td><td></td>');
    tmpTapHeaderHTML.push('<td><span></span></td>');
    tmpTapHeaderHTML.push('<td></td>');
    tmpTapHeaderHTML.push('<td><div>' + TabName + '</div></td>');
    tmpTapHeaderHTML.push('<td></td>');
    tmpTapHeaderHTML.push('<td></td>');
    tmpTapHeaderHTML.push('</tr>');
    tmpTapHeaderHTML.push('</table>');

    return tmpTapHeaderHTML.join('');
}

Answer 1

hm you cant do this because there has to be a reference in the global scope to run the onclick function say you got

<a oncklick="runme()">runme()</a>

you would have to have the function runme present in the global scope (window) so you would have to do this (clickCallbackFunctionName must be a string containing the NAME of the function you want to call):

function GenerateTapHeader(TabName, clickCallbackFunctionName) {
    var tmpTapHeaderHTML = new Array();

    tmpTapHeaderHTML.push('<table id="Table_' + TabName + '" class="TapHeader" onclick="' + clickCallbackFunctionName + '();">');
    tmpTapHeaderHTML.push('<tr>');
    tmpTapHeaderHTML.push('<td></td><td></td>');
    tmpTapHeaderHTML.push('<td><span></span></td>');
    tmpTapHeaderHTML.push('<td></td>');
    tmpTapHeaderHTML.push('<td><div>' + TabName + '</div></td>');
    tmpTapHeaderHTML.push('<td></td>');
    tmpTapHeaderHTML.push('<td></td>');
    tmpTapHeaderHTML.push('</tr>');
    tmpTapHeaderHTML.push('</table>');

    return tmpTapHeaderHTML.join('');
}

Answer 2

等到将表添加到 dom 之后，然后执行以下操作：

$('#Table_' + TabName).click(function(){
    clickCallbackFunction();
});