1

我一直试图让这个工具提示代码在页面上初始化，但我无法让 jQuery 正确连接。

我们在 Ubuntu 上运行 PHP，我们正在使用 Silverstripe。无论将其添加到何处或添加到哪个文件，我都无法使以下脚本正常工作。我什至尝试从单独的文件中调用它，但它也没有初始化。

如何将此代码添加到 PHP 或 SS 文件中？（银条 CMS 文件）

$(function () {

 $('[data-toggle="tooltip"]').tooltip()

})  

<button type=\"button\" class=\"btn btn-default help-tool\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Below you will find state-by-state breakdowns in Federal, State, and where available Local categories. 
            Explore the data by clicking the map or by clicking the magnifying lens in the table view.\"><i class=\"fa fa-info-circle fa-fw\"></i></button>
4

2 回答 2

2

这通常是一个涉及脚本调用顺序的问题。

我相信你知道，你需要在 Bootstrap 之前调用 JQuery，看起来你正在这样做。您的工具提示代码位于不同的文件中，很可能在您的 JQuery 和 Bootstrap 有机会加载之前被调用。您可以通过在工具提示脚本调用之前将 JQuery 和 Bootstrap 脚本调用复制到单独的文件中来测试这一点。

如果您的脚本调用位于 body 标签的底部，并且页面的一部分正在动态加载，您可以尝试在 head 标签中调用 JQuery 和 Bootstrap，而不是在 CSS 之后：

<!DOCTYPE html>
<html> 
<head>
<link rel="stylesheet" type="text/css" src="bootstrap.css" />
<link rel="stylesheet" type="text/css" src="main.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
</head>
<body>

<!-- 
Your separate file code that
includes tooltip
-->

<!-- Before
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
-->
</body>
</html>
于 2015-12-29T19:52:02.523 回答
1

这里想到了两个原因。首先，$ 有可能被 SS 的模板解析器解释为变量表达式。如果是这种情况，我希望你会得到一个错误。其次，正如 Sumit Kukreja 指出的那样，很可能 jQuery 和 Bootstrap 被注入到模板的底部，并且这些代码在加载之前就被执行了。

选项 1：要验证是否发生这种情况，您可以将以下代码添加到 Page_Controller::init() 或 mysite/_config.php：

Requirements::set_write_js_to_body(false);

这将导致在<head>标签中添加所有必需的 javascript。对于生产来说不是一个好主意，但可以帮助诊断您的问题。

选项 2：您可以使用 Requirements::customScript 从您的控制器中包含该 javascript。

选项 3：将您的 js 片段包装在非 jquery domready 侦听器中，如下所示：

document.addEventListener("DOMContentLoaded", function(event) {
    $('[data-toggle="tooltip"]').tooltip()
});
于 2015-12-30T12:15:51.427 回答