click事件绑定到循环中的最后一个元素或第一个元素

时间:2016-12-14 03:43:48

标签: javascript jquery html closures

当我搜索出上述问题时,我遇到了一些消息来源说,循环完成执行点击,因此当点击循环中的一个项目时,只执行最后一个。某种javascript封闭问题。但是我没有找到解决问题的方法。

我动态地在页面上显示聊天记录。因此,每个聊天应该在其中的下拉元素上绑定click事件。每次单击下拉图标时,都会显示下拉列表。

现在,当我点击其他聊天时,他们不会显示下拉菜单,只会显示最后一次聊天。

如何解决这个问题?

HTML

<div class="btn-group ckit-btn-group t-lg-mt--lg t-lg-mr--lg" role="group" data-dropdown-wrapper>
    <button type="button" class="btn btn-default-o btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-inner-toggle-header>
             <i class="fa fa-ellipsis-h"></i>
    </button>
    <ul class="dropdown-menu dropdown-menu-right" data-dropdown-header>
             <li><a href="#" data-view-participants>View Participants</a></li>
             <li><a href="#" data-new-participants>Add Participants</a></li>
             <li><a href="javascript:void(0);" data-leave-conversations>Leave Conversation</a></li>
    </ul>
</div>

SCRIPT

$('[data-inner-toggle]').on('click', function(e) {
    console.debug('click');
    $(this).closest('[data-dropdown]').css('display', 'block');

});

基于在线参考尝试克服所谓的关闭问题。

$('[data-inner-toggle]').on('click', function(e) {
    console.debug('click');

        var oList = $('[data-inner-toggle]');
        var aListItems = $('[data-dropdown]');
        for(var i = 0; i < aListItems.length; i++) {
            var oListItem = aListItems[i];
            // Here I try to use the variable i in a closure:
            oListItem.onclick = function() {
                console.debug(i);
            }
        }
});

0 个答案:

没有答案