Question

HTML

<ul class="items">
  <li data-val="1">first</li>
  <li data-val="2">second</li>
  <li data-val="3">last</li>
</ul>

JS

//inside document.ready event
$(".items").find("li").on("click", {value: $(this).data("val") } ,selectNode);

//the function
function selectNode(selected) {
  console.log(selected.data.value);
}

我想在click事件中获取data-val属性。我知道在函数体中更改$(this)的位置是可能的，但我需要在函数外部执行此操作。我在代码中使用undefined获得$(this).data("val")。

Answer 1

在您的代码中，$(this) - 在父上下文中，而不是在选定的节点上下文中，使用如下代码：

var li = $(".items").find("li");
li.on("click", {value: li.data("val") } ,selectNode);

//the function
function selectNode(selected) {
  console.log(selected.data.value);
}

Answer 2

尝试这样做，从它（应该）工作的事实来看，它只创建一个eventHandler而不是3（li的计数）

$(".items").on("click", "li" ,function(){
  console.log($(this).data.value);
});

Answer 3

如果你想创建一个事件处理程序，以某种方式知道所涉及的元素，你可以这样做：

$(".items li").each(function() {
  var value = $(this).data("val");
  $(this).on("click", { value: value }, selectNode);
});

您的“selectNode”功能必须不同：

function selectNode(event) {
  var value = event.data.value;
  console.log("the value is " + value);
}

这避免了在事件处理程序中使用this，尽管它并不清楚为什么会出现问题。另请注意，如果更改元素上的“val”数据属性，此方法会将值（就事件处理程序而言）冻结为事件处理程序时的值。建立的。

Answer 4

试试这个http://jsfiddle.net/Tushar490/dm7gc2t5/

//inside document.ready event
$(".items").find("li").on("click", function selectNode(e) {
console.log($(this).attr('data-val'));
});

获取单击元素属性（“单击”）

4 个答案: