Javascript 如何为选择器添加事件侦听器，这些选择器的元素将在以后添加类/id？

我有一组元素，我想用作引导“折叠”小部件，但元素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>

---

我的直觉告诉我，这与事件的注册方式有关，但我甚至不确定如何解决这个问题。需要做什么？

两件事。首先，在添加或更改ID时，您需要使用

prop（）

方法，而不是

attr（）

。第二，您正在将

href

属性的值添加为ID，但该属性的开头包含一个hashtag，该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);
    });
});

---

我假设您的问题是，引导accordion插件在您添加这些ID之前已初始化，它会在此时（当ID仍然为空时）查找对应的切换，而不是在稍后单击“切换”时。因此，将初始化移动到脚本之后。OP处的片段似乎返回每个

id

。如果可能，描述问题？请看ThanksAlso，只是好奇，但是为什么要以这种方式添加ID呢？这段代码是由服务器端脚本生成的还是不能更改的（为了在该脚本输出中添加ID）？

$(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);
    });
});