Q&A
前提・実現したいこと
tippy.jsのツールチップを実装しようと思っています。
tippy.jsの動作は正常に動くのですが、innerHtmlにボタンを設置して、クリックした時の動作が希望のものになりません。
ボタンをクリックしてもconsoleで値をとることができませんでした。
調べるとツールチップで表示する要素がhtml内に生成されていない為、jqueryの仕様でクリックがきかないようでした。
tippy.jsの公式サイトに「onShown」というオプションがあり、ツールチップが完全に表示されてからの処理を記述する関数がありました。
これを使えばうまくいくと思っているのですが、いまのところできていません。
書き方の問題だと思うのですが、どう書けば良いのかわかりませんでした。
ご教授よろしくお願いします。
発生している問題・エラーメッセージ
エラーは出ていません。
該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>test</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://unpkg.com/@popperjs/core@2"></script> <script src="https://unpkg.com/tippy.js@6"></script> </head> <body> <p class="target-btn num1" data-template="tool-b-1">click</p> <!-- hidden --> <div style="display: none;"> <div id="tool-b-1" class="tool-box" > <div class="tool-inner"> <a href="#" class="ac-target-btn" >more</a> </div> </div> </div> <!-- hidden end --> <script> new tippy('.target-btn', { content(reference) { const id = reference.getAttribute('data-template'); const template = document.getElementById(id); return template.innerHTML; }, allowHTML: true, placement: 'top', animation: 'scale', duration: 300, trigger: 'click', arrow:false, interactive:'true', hideOnClick: true, onShown: function() { $('.ac-target-btn').off("click").on("click", function(){ console.log('clicked!'); }); } }) </script> </body> </html>
試したこと
・onShownの記述を変える
・DOM内にhtmlソースを始めから生成させてからのアプローチ
・トリガーのaをbutton等の別タグに変えたり、クラスやIDを変えてみる
回答1件
0
ベストアンサー
確かにonShownのコールバックで行けそうですが、発火しませんね。
ドキュメントに「ライフサイクルを手動で呼び出す必要があります。」と有りややこしそうなので、別の解法を紹介します。
jQueryにはデリゲートという機能があり、クリックなどのイベントを親の要素で監視できます。
下記の例ではdocument要素で下層の.ac-target-btn要素がクリックされたかを判定しています。
動的に生成した要素に毎回イベントハンドラを付けなくて良いので便利です。
js
1//追加 2$(document).on("click", '.ac-target-btn', function(){ 3 console.log('clicked!'); 4});
投稿2021/08/05 07:37
総合スコア1293
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/08/05 07:59