自定义 twitter 引导下拉菜单答案

【问题标题】：Customize twitter bootstrap dropdown自定义 twitter 引导下拉菜单
【发布时间】：2012-12-12 20:55:52
【问题描述】：

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

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

有什么想法吗？

【问题讨论】：

这对于您的示例没有意义：“因此，当单击这些图标时，它不应该检查元素的复选框。”
我已经更新了 jsfiddle，现在更好了吗？问题更清楚了吗？

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

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

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

Your Updated Fiddle

编辑：代码更正：

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

Updated Fiddle with dynamic functionality

【讨论】：

如果动态添加新图层，功能不绑定新图标，每次添加元素时需要手动绑定吗？我以为“开”是自动完成的……
不，会自动绑定；通过 .on()
@Antoine 啊哈，我明白你在说什么。我现在正在调查。
@Antoine 我已经解决了这个问题，我没有创建 .on 绑定到具体元素。这就是你所需要的。
@Antoine 在加载需要响应 UI 事件的动态内容时，这是要走的路。当然，您可以附加元素，将该元素绑定到事件，然后继续。但是您必须为每个添加的项目执行此操作，这会变得烦人且乏味。 .on() 处理程序允许您将所有各自的元素绑定整齐地打包到一个调用中。另外，取消绑定是 '$(element).off('click', functionName);我熟悉您在做什么，在我看来，这是满足您需求的最佳做法。如果您同意，您不会将此作为您选择的答案吗？ :)

【解决方案2】：

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

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

见http://jsfiddle.net/PcjNz/

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

【讨论】：

这不会处理动态内容绑定。 .click() 事件只会绑定页面上当前的元素。您在此处查找的是 .on/live/etc，它将绑定到将来动态添加的元素。
其实我这里的主要问题不是动态绑定，而是阻止复选框被选中
@Antoine 问题在于：稍后添加元素时仍会选中复选框，因为这种类型的绑定不适用于动态内容。