如何在多个元素上处理相同的 jQuery 事件处理程序？

Question

假设您有以下代码来更新许多元素：

<div class='item'>
  Name:<input type='text' name='name' data-id='123' value='Name 1'>
  <button class='update'>update</button>
</div>

<div class='item'>
  Name:<input type='text' name='name' data-id='456' value='Name 2'>
  <button class='update'>update</button>
</div>

以及处理更新的 Javascript：

function updateName(name, id){
  ...
}

可以找到值和id并调用updateName的jQuery处理程序是什么？

$('button.update').click(function() {
  name = ?
  id = ?
  updateName(name, id)
}

编辑：

预期的行为是当用户更新输入字段时，更新的值被发送到updateName()，而不是原始值。

另外，请注意 data-id 和 value 在输入上，而不是按钮上。

http://jsfiddle.net/e3g6nfc1/8/

Answer 1

内部事件处理程序 this 是未包装的 DOM 元素

$('button.update').click(function() {
  var name = this.name
  var id = $(this).data('id');
  updateName(name, id)
}

请注意，在这种情况下您需要var，否则name 和id 会跳出该函数的范围并可能成为全局变量。

I've argued before that this is awkward and bad to use。不用这样使用也可以达到同样的效果：

$('button.update').click(function(e) {
  var name = e.currentTarget.name
  var id = $(e.currentTarget).data('id');
  updateName(name, id)
}

您也不必对数据使用 jquery。在reasonably modern browsers $(domElement).data('foo') 上等同于domElement.dataset['foo']

---

编辑：不确定我是否在问题中遗漏了这一点，或者是否已对其进行了编辑，但似乎您不是在要求按钮上的属性，而是要求它之前的元素 时间>。在这种情况下，您需要$.fn.prev，它看起来像这样

$('button.update').click(function(e) {
  var $prev = $(e.currentTarget).prev();
  updateName($prev.name, $prev.data('id'))
}

请注意，这假定输入元素直接位于按钮之前。如果你想找到最近的输入元素，你可以使用$.fn.prevAll

  var $prev = $(e.currentTarget).prevAll('input').last();

Answer 2

像这样：

$('button.update').click(function() {
  name = $(this).attr('name');//to get value of name attribute
  id = $(this).data('id'); // to get value of attribute data-id
  updateName(name, id)
}

你也可以使用 prop() 方法获取name or data-id：

name = $(this).prop('name');
id = $(this).prop('data-id');

但最好是对data-* 属性使用 data() 方法。

Answer 3

不知道为什么这里的答案试图在 button 元素上找到 input 属性...

<div id="container">
    <div class='item'>
      Name:<input type='text' name='name' data-id='123' value='Name 1'>
      <button class='update'>update</button>
    </div>

    <div class='item'>
      Name:<input type='text' name='name' data-id='456' value='Name 2'>
      <button class='update'>update</button>
    </div>
</div>

委派事件仅附加到容器（仅选择具有.update 类的子级），在它们“冒泡”时捕获它们。 previousElementSibling 用于定位 input，但如果布局更复杂，也可以使用 jQuery 选择器来查找它。

$('#container').on('click','.update',function(e) {
    updateName(
        e.currentTarget.previousElementSibling.name, 
        $(e.currentTarget.previousElementSibling).data('id')
    );
});

JSFiddle