javascript - 自定义 twitter 引导下拉菜单

Question

我尝试使用 twitter boostrap 下拉插件来制作可编辑的下拉列表。现在我有这个：http: //jsfiddle.net/U9L2J/3/

我想要做的是在列表的每个元素的右侧放置一个铅笔图标和一个删除图标（使用<i class="icon-pencil"></i>和<i class="icon-remove"></i>）。并在单击这些图标时触发事件。所以当这些图标被点击时，它不应该检查元素的复选框。我尝试过的所有东西都完全破坏了列表的CSS......

有任何想法吗？

Answer 1

对于那些处理点击事件的人，您应该使用 .on() 将它们映射起来：

    $(".icon-remove").on("click", function(e){
    alert('clicked');
    e.preventDefault();
});

你更新的小提琴

编辑：代码更正：

    $("#layers-dropdown >.layers").on("click","li a label i.icon-remove", function(e){
        alert('clicked');
    e.preventDefault();
});​

更新了具有动态功能的小提琴

Answer 2

使用 preventDefault 来阻止复选框被选中。

​$("i")​​.click(function(e){
  e.preventDefault();
  // some code here - do your thing!
}​);​

见http://jsfiddle.net/PcjNz/

当然，您可能应该将不同的点击事件绑定到不同的图标。此示例仅防止复选框被选中...