javascript - 使用 javascript 或 jquery 中的通配符选择器将事件绑定(bind)到动态生成的元素

Question

我有这个代码:

  var element= document.getElementsByRegex('^signalo-.*');
    $(document).on( 'click', element, function(){
        alert($(this).attr('id'))
    } );

我有未知数量的 id 按钮，所有按钮都以 "signalo-" 开头，后面是一个数字，例如 signalo-1 , signalo-2 ....

正如您在我的代码示例中看到的那样，我知道如何为页面上动态生成的元素绑定(bind)事件，但这里的问题是，对于事件绑定(bind)，您必须传递一个特定的选择器作为第二个参数，这让我有点困惑。我知道如何在纯 javascript 和 jQuery 中使用通配符，我知道将事件绑定(bind)到动态内容很热门，但我不知道如何将它们组合在一起。

有人可以帮忙吗？

Answer 1

您可以使用 jQuery 的“属性开头为”选择器来实现这一点:

$(document).on('click', '[id^="signalo-"]', function() {
  console.log($(this).prop('id'))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="signalo-1">signalo-1</div>
<div id="signalo-2">signalo-2</div>
<div id="notsignalo-1">notsignalo-1</div>
<div id="signalo-3">signalo-3</div>