jQuery 事件委托和祖先答案

【问题标题】：jQuery event delegation and ancestorsjQuery 事件委托和祖先
【发布时间】：2013-02-16 14:48:09
【问题描述】：

我在表格单元格中有几个<span> 元素。对于每个跨度，当用户单击它时，我正在使用事件委托来触发 ajax 请求。（捕获事件的函数绑定到表格单元格）。

问题是 ajax 调用需要包含一个表行标识符，我不确定该标识符存储在哪里，或者如何引用和使用它。

例如，假设表中的每一行代表一个Person，那么当用户点击该行中的一个span时，ajax调用需要包含personId。

personId 应该是行的类属性（例如<tr class='person-id-123'>...）吗？或者可能是一个 id（例如<tr id='person-id-123'>...）？以及如何在捕获点击事件的函数中引用和使用它？

谢谢！

【问题讨论】：

标签： jquery jquery-selectors

【解决方案1】：

使用HTML5 dataset attributes

<tr data-person-id=123>

$(".tr-parent").on('click', 'tr', function () {
    //$(this).data('person-id') is also valid
    ajaxRequest(this.dataset.personId);
});

【讨论】：

【解决方案2】：

为此，您可以使用 ID，对任何内容进行分类，因为我们可以从 jquery 获得价值。但是如果你使用Data属性会更好。

现在你的跨度在这里

<span data-person-key="47" class="spanclass">
</span>

从 jquery 你可以像这样得到那个值。

$(document).on("click",".spanclass",function(){
  var personKey = $(this).data("person-key");
  $.ajax({
    url: "whatever you url is. if its asp.net then method of controller will be here.or may be php page",
    type: "POST",
    data: {Personid : personKey },
    success://whatever you want to code in success,
    error://whatever you want to code in error
  });
});

【讨论】：