Question

所以我发现了data- *属性，我一直在用ajax来设置我的链接元素目的地的id。

实施例

<a id="link_id" href="url_for_no_ajax" class="some_class" data-container="#main">Display Text</a>

所以这样我可以创建一个php函数来为非java用户创建我的链接，并使用我的ajax的id属性和data-container属性。

工作正常。

我想对我的输入元素做同样的事情，但由于某种原因它无法正常工作。 data- *属性未显示在页面源中。

所以我必须假设我不能将data- *属性用于输入＆＃39;

所以我的问题是什么元素可以采用data- *属性？或者如果更快回答女巫不能接受它？

坦克你StackOverFlow社区！（=

修改

从php输出我输入的行：

echo '<input id="'.$id.'" type="'.$type.'" name="'.$name.'" size="'.$size.'" class="'.$class.'" value="'.$value.'"><br><br>';

然后我如何使用Jquery为ajax检索此数据属性的值：

var data_type = ($(this).attr("data-type"));

如果我alert(data_type)，它告诉我它未定义。

Answer 1

所以我必须假设我不能将data- *属性与输入
一起使用

data-*属性是全局的，可以在input元素中使用。

var span = document.createElement("span");
span.innerHTML = document.querySelector("input").dataset.input;
document.body.appendChild(span);

<input data-input="123" />

Answer 2

输入可以采用数据元素。这是一个测试用例：

jsFiddle Demo

<强> HTML：

<a href="#" data-container="a-tag">Click Me</a><br><br>
<input type="text" data-container="an_input" /><br><br>
<div data-container="a_div">Div here</div>

<强> JS：

$('*').click(function(){
    var d = $(this).data();
  alert(d.container);
  return false;
});

参考文献：

http://ejohn.org/blog/html-5-data-attributes/

http://api.jquery.com/data/

.data（）方法允许我们以一种不受循环引用安全的方式将任何类型的数据附加到DOM元素，从而避免内存泄漏。

在输入元素

2 个答案: