jQuery触发的Data-filter函数无法重复响应点击问题求助

你的问题核心在于事件绑定的范围局限性：

• 初始执行$('a').click(...)时，只会给当时页面上已存在的<a>标签绑定点击事件。
• 但每次点击<a>都会调用test()函数，重新生成并替换.test容器里的<a>标签，新生成的标签没有绑定点击事件，所以第二次点击就无法触发alert了。

可行解决方案：事件委托 #

把点击事件绑定到父元素（比如.test容器）上，通过监听子元素的点击行为，不管<a>是页面初始化时就存在，还是后续动态生成的，都能触发事件。

修改后的代码示例：

<div class="test"></div>
<script>
const code = document.querySelector(".test");
function test(test1, test2) {
  let Text = "";
  Text += `<a href="#" class="number" data-filter=".text" onClick="test(1, 1)">Test</a>`;
  Text += `<a href="#" class="number" data-filter=".text1" onClick="test(1, 1)">Test1</a>`;
  code.innerHTML = Text;
}
test(1, 1);

// 用事件委托绑定到父元素.test上
$('.test').on('click', 'a', function(){
  alert($(this).attr("data-filter"));
})
</script>

额外提示：如果你的业务逻辑不需要每次点击都重复渲染相同的<a>标签，可以去掉内联的onClick="test(1, 1)"，减少不必要的DOM重复操作。

内容的提问来源于stack exchange，提问作者Josef Volný