javascript - 在 onClick 中传递数据的替代方案？

Question

我有一个网页，其中列出了某个服务器的所有数据库记录。 每行旁边都有一些按钮，可让您重命名或删除记录。

INPUT( _value='Rename', _type="button", _class='appbutton', _onclick='renameApplication({0},"{1}")'.format(app.id,app.name))

这会生成类似以下内容的内容:

<input class="appbutton" type="button" value="Rename" onclick="renameApplication(3,"My Application")"></input>

(后端模板引擎是 web2py，但这并不重要。)

我正在动态生成这些按钮。目前我通过onClick传递每个按钮需要的数据。

根据jQuery.click() vs onClick我不应该再这样做了。但如果是这种情况，我应该如何传递数据，以便每次按钮单击都可以使用服务器端写入的动态数据(本例中的应用程序 ID 和名称。)

我无法通过记录进行 dom 遍历来获取数据，因为行结构可能会发生变化。

我无法使用自定义属性，因为我需要支持低于 HTML 5 的版本，而且我不会修改文档类型! (Can I add custom attribute to HTML tag?)

我唯一能想到的就是将数据放入 id 属性中然后解析它，但这看起来很hackish。

有更好的方法吗？

Answer 1

您可以尝试使用jQuery on将事件 Hook 到每个按钮上。您可以将服务器 ID 放入 jQuery 可以理解的数据属性中，不会出现重大问题:

<input class="appbutton" type="button" value="Rename" data-id="3"></input>

然后是js:

$('#container').on('click', '.appbutton', function () {
  var serverId = $(this).data('Id'); //this binds to html input
  renameApplication(serverId);
});