使用jquery访问数据属性会返回undefined吗？

在我的视图中，我有一个按钮如下：

我的div

脚本

 function updateClick() { var id = $(this).data('assigned-id'); $('#partial_load_div').show(); $('#partial_load_div').load('/Users/UpdatePartial?id=' + id); } 

id始终显示为未定义，我检查并且@IdUser始终为值

然后在chrome dev我得到了错误

GET http：// localhost：19058 / Users / UpdatePartial？id = undefined 400（错误请求）

知道如何解决这个问题吗？

Answer 1

在当前脚本中， $(this)引用Window对象（不是您的按钮），它没有data-属性，因此undefined 。

您可以通过将元素传递给函数来解决此问题

 function updateClick(element) { var id = $(element).data('assigned-id'); .... 

然而，更好的方法是使用Unobtrusive Javascript而不是用行为污染您的标记。

 $('#mybutton').click(function() { var id = $(this).data('assigned-id'); // $(this) refers to the button .... }); 

Answer 2

使用data()读取数据属性时，需要删除-和驼峰大小写的值 。 所以你要：

 var id = $(this).data('assignedId'); 

data（）上的文档显示了这个：

从jQuery 1.4.3开始，HTML 5数据属性将自动引入jQuery的数据对象。 使用嵌入破折号处理属性在jQuery 1.6中进行了更改，以符合W3C HTML5规范。

例如，给定以下HTML：

所有以下jQuery代码都可以使用。

 $( "div" ).data( "role" ) === "page"; $( "div" ).data( "lastValue" ) === 43; $( "div" ).data( "hidden" ) === true; $( "div" ).data( "options" ).name === "John"; 

上面代码的第二个语句正确引用了元素的data-last-value属性。 如果没有数据与传递的密钥一起存储，jQuery将在元素的属性中进行搜索，将驼峰字符串转换为虚线字符串，然后将数据添加到结果中。 因此，字符串lastValue将转换为data-last-value。

---

我没有注意到你对click事件的绑定方式。 如果你想使用$(this)你必须使用jquery绑定事件。 所以你需要：

  clickme $(window).ready(function() { //bind the event using jquery not the onclick attribute of the button $('#button').on('click', updateClick); }); function updateClick() { alert($(this).data('assignedId')); } 

工作小提琴