2

我有一个页面上有很多 Javascript。包括流行的 Twitter 引导程序的弹出窗口小部件，它不起作用。特别是如果我将鼠标悬停在应该启动“弹出框”的图标上。我知道 HTML/JS 是正确的，因为它与这个工作 jsfiddle: simple working example完全相同。

这是 HTML 内联：

   <span id="container">
<i id="common-actions-info" 
    class="icon-info-sign" 
    rel="popover"
    data-trigger='hover'
    data-delay={show:10,hide:500}
    data-placement="right"
    data-title="Common Actions" 
    data-content="A list of actions that you have been using frequently. Choosing any of these actions will open up a new quick entry form to add another of these items."></i>

​然后我将popover javascript与：

$("[rel=popover]").popover();​

在我更复杂的“真实环境”中，我可以运行

$("[rel=popover]").popover('显示/隐藏')

命令并且有效，但是当我将鼠标悬停在图标上时，它只是没有得到显示它的信号。无论如何，我认为问题在于其他一些 JS 正在捕获悬停事件并且没有触发弹出框的显示。

有没有一种好方法可以使用 Chrome 的调试器来观察 DOM 事件并追踪这里发生的事情？

更新：

我一直在查看 Chrome 开发者工具的元素选项卡中的“事件监听器”。虽然我仍然对它提供的信息树有点不知所措，但我发现了一个重要模式：在“popover”插件工作的页面上，您会在我的小部件上找到“mouseover”和“mouseout”事件侦听器guess 负责打开和关闭小部件的显示。在它不起作用的页面中，这些事件不存在（到目前为止，我所看到的是根本没有听众）。

有人有什么主意吗：

  1. 与正在设置的 Bootstraps 侦听器有什么冲突？
  2. 我怎样才能解决这个问题而不会在头顶上失去更多的头发？
4

1 回答 1

1

您可以使用名为 Firebug 的 Chrome/Firefox 插件。

安装它，打开它，转到 DOM 选项卡并刷新您的页面。它将向您展示 DOM 操作、函数执行......一切的详细概述。

看看这个页面：https ://getfirebug.com/dom 。它将为您提供 Firebug DOM 浏览器的基本功能。

这也是一个很好的教程： http: //www.softwareishard.com/blog/firebug/firebug-tip-log-dom-events/

编辑 ：

有一种方法可以捕获事件。这不是最好的解决方案，但如果其他一些插件/框架控制了所需的容器，它将帮助您：

假设您将点击事件绑定到 i#common-actions-info

$('i#common-actions-info').click(function() { console.log('clicked!') });

然后，您可以使用此代码查看绑定到 i#common-actions-info 的事件：

var clickEvents = $('i#common-actions-info').data("events").click;
jQuery.each(clickEvents, function(key, handlerObj) {
    console.log(handlerObj.handler) // will print "function() { console.log('clicked!') }"
})
于 2012-12-24T23:27:34.920 回答