从bootstrap弹出窗口内容执行js

Question

在bootstrap 2.3弹出窗口中，我显示一些html代码。我点击它时需要触发一个js函数，但我很难这样做。

如果我点击包含弹出窗口内部呈现的HTML的div，但不是点击弹窗内部的内容，js函数会正确执行。

这里我的咖啡

$('[data-toggle~=popover]').popover({ 
    html: true 
    content: -> 
    $("#content").html() 
}) 

$(".updateit").on "click", -> 
    console.log "pippo" 

和HTML

<a data-placement="right" data-toggle="popover" href="#">click me</a> 
<div id="content"> 
    <div class="updateit" style="color:red">abc</div> 
</div> 

用于测试目的的div＃内容不会隐藏，如果我点击它，“皮波”打印在控制台，但是如果我点击popover内容（html看起来相同），控制台上没有任何东西被打印出来。

有没有办法从popover内部调用js函数？

谢谢。

Answer 1

这看起来像一个常见的jQuery事件绑定陷阱。在创建弹出窗口之前，可能发生的事情是$(".updateit").on "click",() -> ...正在运行。该特定功能只会将点击事件绑定到现有元素;新的将不会应用该事件。由于弹出窗口在运行后会使用“updateit”类创建自己的元素，因此该事件不适用于它。

幸运的是，修复非常简单。 $(document).on 'click', '.updateit',() -> ..应该做的伎俩。这将适用于文档中类“updateit”的每个元素，而不管它是何时创建的。

相关jsbin - http://jsbin.com/ALESUXib/1/edit