表单标签中的data-attribute是什么意思？

Question

今天我偶然遇到了一个奇怪的问题，想知道是什么原因？

如果我尝试通过jQuery提交表单并尝试获取自定义数据属性，它将是“未定义”的。 以下是代码示例：

HTML

<form action="/" method="POST" data-test="passed">
    <input type="text" name="in1" value="valuable" />
    <input type="submit" />
</form>

JS

$(function(){
    $('form').submit(function(){

       // this will work
       alert(this.action);

       // this will fail
       alert(this.data-test);

       return false;
   });
});

JSFiddle: http://jsfiddle.net/7etzas0m/

希望有人能够感兴趣并回答我的问题。 谢谢。

- Fabian Maurer

---

this.dataset.test - 使用data-api - http://jsfiddle.net/arunpjohny/7etzas0m/4/ - Arun P Johny

谢谢你的回答，但是为什么我必须特别处理数据属性呢？ - Fabian Maurer

Answer 1

使用 .data() 获取数据属性。尝试这样做：

alert($(this).data('test'));

演示

- Kiran

Answer 2

您可以使用以下方法读取属性：

jQuery的 .attr() 函数：

alert($(this).attr('data-test'));

jQuery的.data()方法：

alert($(this).data('test'));

- Catalin MUNTEANU

Answer 3

继续您的非jQuery方法。只需使用：

if (this.dataset) 
{
 alert(this.dataset["test"]);
}

http://jsfiddle.net/7etzas0m/3/

- Royi Namir

---

可能应该警告关于旧浏览器的支持。 - Arun P Johny

@FabianMaurer 确实如此。我只是想让您知道，它也可以以vanila的方式进行访问，但您应该使用jQuery。 - Royi Namir

谢谢提供信息，非常感激。但我也习惯了jQuery。 - Fabian Maurer

Answer 4

修改你的脚本为：

$(function(){
    $('form').submit(function(){


       alert($(this).attr('action'));


       alert($(this).data('test'));

       return false;
   });
});

- Apul Gupta

Answer 5

请尝试您的 更新的 FIDDLE :

    $(function(){
         $('form').submit(function(){        

          alert(this.action);        

          alert($(this).attr('data-test'));

         return false;
      });
   });

- Tushar Raj