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 タグの下部にあり、ページの一部が動的に読み込まれている場合は、CSS の後ではなく head タグで JQuery と Bootstrap を呼び出してみてください。

<!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

ここで思い当たる原因は2つあります。まず、$ が SS のテンプレート パーサーによって変数式として解釈される可能性があります。その場合、エラーが発生すると思います。第二に、Sumit Kukreja が示したように、jQuery と Bootstrap がテンプレートの下部に挿入されており、このコードが読み込まれる前に実行されている可能性があります。

オプション 1 : これが発生しているかどうかを確認するには、次のコードを Page_Controller::init() または mysite/_config.php に追加します。

Requirements::set_write_js_to_body(false);

これにより、必要なすべての JavaScript が<head>タグに追加されます。本番環境ではお勧めできませんが、問題の診断に役立つ可能性があります。

オプション 2 : Requirements::customScript を使用してコントローラーからその JavaScript を含めることができます。

オプション 3 : 次のように、js スニペットを非 jquery domready リスナーにラップします。

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