当我搜索出上述问题时,我遇到了一些消息来源说,循环完成执行点击,因此当点击循环中的一个项目时,只执行最后一个。某种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);
}
}
});