Question

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

如果我单击包含在popover内部呈现的HTML的div，但是如果我单击popover本身内部的内容，则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＃content并未隐藏，如果我点击它，“pippo”会在控制台上打印出来，但是如果我点击popover内容（html看起来相同），控制台上就不会打印出任何内容。 / p>

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

感谢。

Answer 1

这看起来像一个常见的jQuery事件绑定问题。可能发生的是$(".updateit").on "click", () -> ...在创建弹出框之前运行。该特定函数仅将click事件绑定到现有元素;新的将不会应用该事件。由于popover将在运行后使用'updateit'类创建自己的元素，因此该事件将不适用于它。

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

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

从内部bootstrap popover内容执行js

1 个答案: