时间戳

首页 > 解决方案 > 附加属性 [data-name] 然后单击使用此数据属性

javascript - 附加属性 [data-name] 然后单击使用此数据属性

问题描述

我试图在单击一个元素时添加一个 data-name 属性，然后在单击该元素时执行其他操作。

$(".btn01").on("click", function() {
    $(".next").attr("data-name", "btn02");
});

$("[data-name='btn02']").on("click", function() {
    console.log("I clicked this button");
});

它在 DOM 中更新但不工作？有任何想法吗？

标签： javascriptjqueryhtmlattr

解决方案

您必须使用事件委托，因为您在第二次点击事件的选择器中使用的属性是[data-name='btn02']由 JS 代码动态创建的：

$(".btn01").on("click", function() {
  $(".next").attr("data-name", "btn02");
});

$("body").on("click", "[data-name='btn02']", function() {
  console.log("I clicked this button");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn01">CLICK ME then click the span bellow</button>
<br><br>
<span class="next">Next span</span>

推荐阅读