如何在多个元素上处理相同的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){ 
    ... 
} 

什么是jQuery的处理程序，可以找到价值和ID和呼叫updateName？

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

编辑：

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

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

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

Answer 1

像这样：

$('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) 
} 

您也可以使用道具（）方法得到name or data-id：

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

但最好是使用数据（）方法data-*属性。

Answer 2

内部事件处理this是要在这种情况下var否则name和id跳出该函数的范围，并可能成为全局变量展开的DOM元素

$('button.update').click(function() { 
    var name = this.name 
    var id = $(this).data('id'); 
    updateName(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 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