获取动态手风琴的索引 jquery

Question

我可以用这种方式在 AJAX 调用后生成手风琴列表：

data.items.forEach(function(item,index) {
                if(item.desciption != "") {
                    $('#accordionList').append(
                        templateAccordion(item, index)
                );
          }
});

其中 templateAccordion 是：

var templateAccordion = function(item, index) {
        return '<div class="card">' +
        '<div class="card-header" id="heading_'+index+'" data-toggle="collapse" onclick="test('+index+')" data-target="#collapse_'+index+'" aria-expanded="false" aria-controls="collapse_'+index+'">' +
        '<h5 class="mb-0">'+
          '<button class="btn btn-link collapsed">'+
            item.desciption + 
          '</button>'+
        '</h5>'+
      '</div>'+ 
      '<div id="collapse_'+index+'" class="collapse" aria-labelledby="heading_'+index+'" data-parent="#accordionList">'+
        '<div class="card-body">' +

        '</div>'+
      '</div>'+
    '</div>'
    }

问题：

当我点击每个手风琴的 header 以获取有关该元素的其他数据时，我需要调用另一个服务。为此，我想到了两种可能的方法。

第一个是元素 header 上的 onclick="" 函数（就像在我的示例中一样）。但是这个解决方案不起作用，因为我得到了 Uncaught ReferenceError: test is not defined（并且该函数存在于我的 javascript 中）。

第二种是使用header的id触发点击功能。但正如您所见，它是动态的。所以我没有它，因为它可能是 1、2、3 等等。

我无法遍历整个列表并尝试获得正确的 id。这是不可想象的。

还有别的办法吗？也许只是明白为什么它让我 Uncaught ReferenceError: test is not defined？

Answer 1

这应该有效：

$('#accordionList').on('click','.card-header', function(){
    var id = $(this).attr('id');
});

获取动态手风琴的索引 jquery

Get index of dynamic accordion jquery

html

javascript

jquery

bootstrap-accordion