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/

我希望有人感兴趣，并且可以回答我的问题。感谢

Answer 1

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

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

<强> DEMO

Answer 2

您可以使用以下方式阅读属性：

jQuery .attr()：

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

jQuery .data()：

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

Answer 3

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

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

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

Answer 4

将您的脚本修改为：

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


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


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

       return false;
   });
});

Answer 5

试试 UPDATED FIDDLE：

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

          alert(this.action);        

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

         return false;
      });
   });

表单标记中的data-attribute

5 个答案: