Twitter Bootstrap 工具提示 (PHP) 在 Wordpress 中不起作用

Question

我正在尝试使用 Twitter Bootstrap 弹出框/工具提示，但我在控制台中收到以下错误：

Uncaught TypeError: Object #<Object> has no method 'popover'

我的函数文件中有以下内容来包含这些文件，这些文件可以在源代码中看到并在单击时指向正确的脚本：

add_action('wp_enqueue_scripts','dcr_enqueue_scripts');

if(!function_exists('dcr_enqueue_scripts')):
function dcr_enqueue_scripts(){

    wp_register_script('tooltip',get_template_directory_uri().'/js/bs-tooltip.js','jquery');
    wp_register_script('popover',get_template_directory_uri().'/js/bs-popover.js',array('jquery','tooltip'),'1.0');
    wp_enqueue_script('tooltip');
    wp_enqueue_script('popover');

}
endif; 

以下元素期待弹出框：

<th><span>Description:</span><img class="popoverthis" src="<?php bloginfo('template_url')?>/images/info.png" data-content="This is the content" title="Title"></th>

而页面中包含的调用popover函数的jQuery是这样的：

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('.popoverthis').popover({
        placement: "bottom"
    });
});

对于解决此问题的任何想法将不胜感激。

Answer 1

我看不到任何对 $.noConflict(); 的调用

http://api.jquery.com/jQuery.noConflict/

在站点关闭之前，我从控制台尝试了 jQuery('.popoverthis').hide()，结果相同。

Answer 2

需要检查的几件事：

• 页面加载顺序 - 您的弹出框是否在 jquery 或 jquery.popover.js 插件被调用之前执行？

如果这是问题，您将不得不提高/降低 enque 脚本的优先级，如下所示：

add_action('wp_enqueue_scripts','dcr_enqueue_scripts', **5**); // default is 10

• 您是否有正确的 jQuery 版本（wordpress 捆绑了一个，有时它可能比外部脚本所需的版本旧）？

• 打开 firebug/web 检查器并手动运行：
  jQuery('.popoverthis').popover({ placement: "bottom" });

看看哪里出了问题

更新：还有一些可能出错的地方（这里列出了如何解决您的问题）：

• 您在网站上包含了两个 jQuery（可能由另一个插件提供）- 1.4.2 出现在 1.7.2 之后并破坏了基本的引导 javascript。
• 您缺少此插件所需的 Bootstrap CSS 信息。它确实有效，但它会在网站底部显示工具提示信息，因为没有 CSS 来使它看起来更漂亮。

解决方案：使用一个独立的 popovover 插件，像这样一个来自 crowdfavorite 的插件： https://github.com/crowdfavorite/jquery-popover 并且还包括它的 CSS 文件。

（您也可以引入 bootstrap 的 CSS，但它可能会破坏您的网站 CSS）