Jquery從同一類的動態循環輸入中檢索值？

Question

jQuery的：3.x中，Tomcat7

問題：

var htmlStr 
for(var i=0;i<data.length;i++){   
    htmlStr += "<input class='my_button' type='button' data-value='"  
    + data[i].value + "' value='" + data[i].value + "'/>";     
} 

$("#keyvals").html(htmlStr); 

$('.my_button').click(function(){ 
    alert(this.data-value); 
}); 

問：對於動態創建my_button」 '與同一類類=輸入'，如何獲得點擊的價值？

幫助受到高度讚賞。

Answer 1

.data是一個函數，所述數據元素的名稱是參數。這也是一個jQuery函數，所以你需要使用$(this)。

$('.my_button').click(function(){ 
    alert($(this).data('value')); 
}); 

Answer 2

嘗試：

$('.my_button').click(function(){ 
    alert($(this).data('value')); 
}); 

的jsfiddle：https://jsfiddle.net/NotABlueWhale/xb838mdz/

Answer 3

破折號（-）是無效的JS變量，它被看作是負

你可以做

• alert(this.getAttribute("data-value")); // DOM
• alert($(this).attr("data-value")); // jQuery
• alert($(this).data("value")); // jQuery DATA

但是你MAY也想/需要委派因爲按鈕是動態生成

$("#keyvals").on("click",".my_button",function(){ 

Event binding on dynamically created elements?

var data = [{value: "ONE"}, 
 
      {value: "TWO"}, 
 
      {value: "THREE"}], 
 
    htmlStr=""; 
 
    
 
for (var i = 0; i < data.length; i++) { 
 
    htmlStr += "<input class='my_button' type='button' data-value='" + 
 
    data[i].value + "' value='" + data[i].value + "'/>"; 
 
} 
 

 
$("#keyvals").html(htmlStr); 
 

 
// this works without delegation because it is after the insertion 
 
$('.my_button').click(function() { 
 
    console.log($(this).attr("data-value")) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div id="keyvals"></div>