如何为稍后将添加类/id的元素的选择器添加事件侦听器

How to add event listener for selectors whose element will have the class/id added later?

本文关键字：添加 id 元素 选择器 侦听器 事件      更新时间：2023-09-26

我有一组元素，我想用作为引导"崩溃"小部件，但元素Id是动态的。到目前为止，我还不能让它们工作，因为它们的id是后来添加的-特别是目标"面板"的id要打开/关闭。代码示例:

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="" class="panel-collapse collapse in panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="" class="panel-collapse collapse panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="" class="panel-collapse collapse panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    </div>
  </div>
</div>

这里是JavaScript的一小部分，它演示了动态添加ID是如何不起作用的:

$(document).ready(function(){
    $('.panel-heading > .panel-title > a[data-toggle="collapse"]').each(function(){
        var targetId = $(this).attr('href');
        $(this).closest('.panel-heading').next().attr('id',targetId);
        console.log(targetId);
    });
});

我的直觉告诉我，这与如何开始注册事件有关，但我不确定如何解决这个问题。需要做些什么?

几件事。首先，在添加或更改id时，您将希望使用prop()方法而不是attr()。其次，您将href属性的值添加为ID，但在开始时包含一个hashtag，这不是一个有效的ID。在将其添加为新ID之前，您需要将其删除。最后，这不是100%必需的，但是为了清晰起见，您应该在next()函数中指定元素。

你的代码应该是这样的:

$(document).ready(function(){
    $('.panel-heading > .panel-title > a[data-toggle="collapse"]').each(function(){
        var targetId = $(this).attr('href').replace('#', '');
        $(this).closest('.panel-heading').next('.panel-body').prop('id',targetId);
        console.log(targetId);
    });
});
相关文章：