使用带有超文本链接的data-attribute

Question

我已阅读本教程tuto

我想在超文本链接中使用attribut data-：

 <a href="#" onClick="openbox2('Validation de concept technique', 1)" data-arr="@fa.Id_element" id="lien">Donner votre avis</a> 

javascript部分中的

：

  function openbox2(formtitle, fadin) {
         var self = $(this);
         var arr = self.data('arr');
        alert(arr);
}

我始终收到相同的提醒讯息undefined。

这个问题是什么原因造成的？我该如何解决？

Answer 1

由于您附加活动的方式，this不是点击的元素。使用on-事件属性现在已经过时，并不是一个很好的关注点分离。因此应该避免。由于您已经在为逻辑使用jQuery，因此最好还使用它来附加您的事件：

<a href="#" data-arr="@fa.Id_element" id="lien" class="openbox">Donner votre avis</a> 

$('.openbox').click(openbox2);

function openbox2(formtitle, fadin) {
    var self = $(this);
    var arr = self.data('arr');
    alert(arr);
}

Example fiddle

Answer 2

由于您使用的是内联单击处理程序，处理程序函数内的this并未引用单击的元素，因此需要将引用作为参数传递给处理程序方法

<a href="#" onClick="openbox2(this, 'Validation de concept technique', 1)" data-arr="@fa.Id_element" id="lien">Donner votre avis</a> 

然后

function openbox2(el, formtitle, fadin) {
    var self = $(el);
    var arr = self.data('arr');
    alert(arr);
}

演示：Fiddle

另一种解决方案是使用.call()

将自定义上下文传递给openbox2方法

<a href="#" onClick="openbox2.call(this, 'Validation de concept technique', 1)" data-arr="@fa.Id_element" id="lien">Donner votre avis</a> 

然后

function openbox2(formtitle, fadin) {
    var self = $(this);
    var arr = self.data('arr');
    alert(arr);
}

演示：Fiddle