Question

我将带有数据属性的链接附加到DIV。单击此DIV时，我需要重新加载页面并调用函数。我试图传递一个名为url的数据属性，并在页面刷新检测，如果数据网址存在并执行正确的函数。谁能解释我做错了什么？我正在使用此示例的示例网址。

$('.activeCategory').html('<a href="http://www.test.com"' + 'data-url="www.test.com#path' + '">' + "www.test.com" + '</a>');

$('.activeCategory').click(function() {
    if ($(this).attr('data-url') == 'http://www.test.com#path') 
    { 
      exampleFunction();
    }
});

Answer 1

您必须先让孩子访问data-url（请参阅代码段）

$('.activeCategory').html(
'Click Me <a href="http://www.test.com"' + 'data-url="www.test.com#path' + '">' 
+ "www.test.com" + '</a>');

$('.activeCategory').click(function() {
  var url = $(this).children('a').data('url')
    if (url == 'www.test.com#path') 
    { 
      alert("data-url = \""+url+"\'")
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="activeCategory"></div>

或者，您也可以通过data-url搜索子项，如下所示：

$('.activeCategory').html(
    'Click Me <a href="http://www.test.com"' + 'data-url="www.test.com#path' + '">' 
    + "www.test.com" + '</a>');

$('.activeCategory').click(function() {
  var link = $(this).children('a[data-url="www.test.com#path"]')
    if (link.length > 0) { 
      alert("data-url = \""+link.data('url')+"\'")
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="activeCategory"></div>

尝试使用数据标记传递数据

1 个答案: