Javascript 动态创建时引导折叠不起作用

我通过ajax调用获取我的内容，并在运行时创建所有可折叠面板。 但切换功能不是以这种方式工作的。我正在使用主干木偶收集和项目视图来创建我的面板组

我检查了静态内容，它可以很好地处理静态数据

我已经检查了几个链接，但在我的情况下，似乎没有任何工作

以下是我的html格式：

<div id="accordion" class="panel-group">
    <div class="panel panel-default">
        <div class="panel-heading">
            <ul class="home_nav" data-toggle="collapse" data-parent="#accordion"
                data-target="NewsMaintenanceMenu">
                ...
            </ul>
            <span class=""><i class="glyphicon glyphicon-chevron-right"></i></span>
        </div>
        <div id="NewsMaintenanceMenu" class="panel-collapse collapse">
            <div class="panel-body">
                <table class="table table-striped">
                    <tbody>
                        ....
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

...

....

在新创建的ajax成功面板上调用

.collapse（）

。如果您不知道如何操作，请提供一个代码片段。

我暂时使用了

jQuery

   $(".panel").on("click", function(e){
              var $_target =  $(e.currentTarget);
              var $_panelBody = $_target.find(".panel-collapse");
              if($_panelBody){
                $_panelBody.collapse('toggle')
              }
        })

---

/***我为动态面板主体创建了动态Id*************/

<div class="col-sm-4" ng-repeat="Category in categoryList">
<!-- Category -->
<div class="dropdown">
    <button class="dropbtn" ng-bind="Category.name"></button>
    <div class="dropdown-content">
        <a href="" title="">Business <span class="pull-right">13</span></a>
        <a href="" title="">Technology <span class="pull-right">13</span></a>
        <a href="" title="">Web <span class="pull-right">13</span></a>
        <a href="" title="">Ecommerce <span class="pull-right">13</span></a>
        <div class="panel-group" id="accordion">
            <div class="panel panel-default">
              <!-- <div class="panel-heading"> -->
                <div class="panel-title">

        <a href="#{{Category.name}}" data-toggle="collapse" data-parent="#accordion" title="">View More <span class="pull-right"></span></a>
       </div>
    <!-- </div> -->
    <div id="{{Category.name}}" class="panel-collapse collapse ">
        <div class="panel-body">
                <a href="" title="">Business <span class="pull-right">13</span></a>
                <a href="" title="">Technology <span class="pull-right">13</span></a>
                <a href="" title="">Web <span class="pull-right">13</span></a>
                <a href="" title="">Ecommerce <span class="pull-right">13</span></a>
        </div>
      </div>
      </div>
      </div>
      </div>
      </div>
    </div>

---

实现这一点的另一种方法

函数collapseOnClick（collapseTrigger）{
/**
*手动添加单击时折叠事件。
* 
*因为动态添加的引导折叠元素不会
*我大部分时间都自动工作。
* 
*“数据目标”是折叠元素的选择器，如
*引导程序文档。
* https://getbootstrap.com/docs/4.3/components/collapse/#via-数据属性
*
*@param{jQuery}collapseTrigger触发器元素用于折叠。
* 
*/ 
var target=collapseTrigger.attr（“数据目标”）
collapseTrigger.on（'click'，function（））{
$（目标）。折叠（'切换'）
})
}

我正在使用主干木偶，并在呈现视图后尝试调用.collapse（）。但这对我不起作用。我已经用代码片段更新了我的问题。你能提供插入面板的JS片段吗？我想他正在使用主干。完整的代码片段不能上传到这里。：）我为面板主体创建了动态id。为我工作。我就是这么做的，但它不起作用。。。还尝试将索引用作@Input，但也不起作用。。。