Question

我的页面中有多个手风琴。现在我想在每个手风琴的扩展上绑定一些事件。但事件只与第一支手风琴结合在一起。

HTML是：循环生成以下手风琴。

<div id="accordion" class="panel-group">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="collapsed" href="#someId_indexOfLoop" data-parent="#accordion" data-toggle="collapse">
                    <i class="fa fa-eye"></i> someText
                    <i class="fa fa-angle-down pull-right"></i>
                    <i class="fa fa-angle-up pull-right"></i>
                </a>
            </h4>
        </div>
        <div class="panel-collapse collapse" id="someId_indexOfLoop" aria-expanded="false" style="">
            <div class="panel-body">
                <div class="project-section activity">
                    <ul class="list-unstyled activity-list" id="ul_someId_indexOfLoop">
                    // here <li></li> are generated by ajax response
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

以下是我绑定事件的.js代码

 $('#accordion').on('show.bs.collapse', function(e){
    var ulId  = $(e.target).attr('id');
    // some code like alert('hi');
});

这里的警报只是第一支手风琴的扩展，事件并没有与所有手风琴结合。

Answer 1

元素的ID必须是唯一的，id选择器将仅返回具有给定id的第一个元素，因此使用class而不是id

<div class="panel-group accordion">

然后

$('.accordion').on('show.bs.collapse', function(e){
    var ulId  = $(e.target).attr('id');
    // some code like alert('hi');
});

Answer 2

您不应将相同的ID设置为多个元素，ID选择器只能返回特定ID的一个元素。

你应该为所有手风琴添加一些共同点，例如：
添加一个班级手风琴＆＃39;所有手风琴并选择$('.accordion')
您还可以为每个手风琴添加数据属性，例如：
data-isAccordion并选择$('div[data-isAccordion]')

Answer 3

根据HTML规范，ID属性是唯一的选择器。如果要在页面上选择多个元素，请使用class。

我建议使用事件冒泡来订阅事件，而不是使用类来选择和订阅事件。事件冒泡是非常直接的概念。以下是一个示例，使用您的代码：http://jsbin.com/yirazo/1/edit?html,js,output

我没有将任何事件监听器附加到特定的手风琴上。我只是抓住那些事件，因为它们在DOM中冒出来。

如何将事件与所有引导手风琴

3 个答案: