如何在多個元素上處理相同的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