c# - 如何将存储在字符串中的函数添加到 jquery .click 事件

Question

我正在尝试编写一个通用表生成器，我可以在其中告诉它在每个单元格的 onclick 事件中调用的函数。然后在页面的其他地方定义该函数。

问题是我无法在正确的时刻获取评估函数的页面。我希望它在构建 DOM 时将我的字符串转换为函数，而不是在触发单击事件时。也许这在 Javascript/JQuery 中是不可能的？

我最初用 C# 编写的服务器端代码的简化版本是:

string functionCall = "DoSomething(4);";
TableCell detailCell = new TableCell();
detailCell.Attributes.Add("onClick", functionCall);
functionCall = "DoSomething(5);";
detailCell = new TableCell();
detailCell.Attributes.Add("onClick", functionCall);

当它在浏览器中呈现为 html 时，这就起作用了。变成了:

 function DoSomething(p)
 {
      alert(p);
 }

<td onclick="DoSomething(4)"></td>
<td onclick="DoSomething(5)"></td>

我想在 Javascript 中复制这个功能。

如果我这样做:

var functionCall = 'DoSomething(4);';
$('#detailCell').attr('onclick', functionCall);

由于某种原因，它不会在 IE7 中触发事件，但会在 Chrome 中触发。

如果我这样做:

var functionCall = 'DoSomething(4);';
$('#detailCell1').click(function () { eval(functionCall); });
functionCall = 'DoSomething(5);';
$('#detailCell2').click(function () { eval(functionCall); });

然后它不会在添加点击事件时将 functionCall 更改为一段文本。相反，它会在单击单元格时评估 functionCall。这意味着 functionCall 的值现在是错误的。

例如它总是执行 DoSomething(5)，即使我点击 detailCell1，因为那是 functionCall 的最后一个值。

如果我这样做:

var functionCall = 'DoSomething(4);';
$('#detailCell1').click(eval(functionCall));

它在添加点击事件时而不是在点击时立即运行 functionCall 中的函数。

我希望这是有道理的，因为它很难解释。

基本上我只是想能够做到

<td onclick="any javascript I feel like storing in a string"></td>

使用 JQuery。

这可能吗？

这是我在 stackoverflow 上的第一篇文章，所以请保持温柔......

Answer 1

试试这个...

var functionCall = 'DoSomething(4);';

$('#detailCell1').click((function (code) {
  return function () { 
     eval(code); 
  };
}(functionCall)));

这里发生的是，您在创建处理程序时通过将其分配给参数“代码”来捕获字符串。

在您当前的场景中，点击处理程序使用的是单击时的字符串值，而不是创建处理程序时的值。

这叫做闭包!

(function (code) {
  return function () { 
     eval(code); 
  };
}(functionCall));

函数调用值被分配给代码参数。现在，当您更改 functionCall 时，代码参数仍然引用旧值。