placement 相关问题

脚本无法在我的引导模式中工作

希望这不是一个愚蠢的问题，但我已经没有主意了...... 所以我有这个模式： 1.scala.html 希望这不是一个愚蠢的问题，但我已经没有主意了...... 所以我有这个模式： 1.scala.html <div class="feat" id="cor" data-toggle="tooltip" data-placement="bottom" title="add conference role"><div data-toggle="modal" data-target="#conf-role-menu-modal">Conference Role</div></div> <div class="modal fade" id="conf-role-menu-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body-conf-role-menu"> <script type="text/javascript"> $(function(){ $(".modal-body-conf-role-menu").load("@routes.Application.areaConferenceRole(id,idenv)"); }); </script> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> 使用模态主体中的脚本，我尝试加载此页面： 2.scala.html @(id:String, idenv:String) @Main("Add area") { <form action="@routes.Application.areaPostConferenceRole(id,idenv)" method="POST"> First Name: <input type="text" name="first_name" id="first" class="form-control"> Last Name : <input name="last_name" class="form-control"> <script type="text/javascript"> $( document ).ready(function() { // Handler for .ready() called. $( "#first" ).focus(function() { alert( "Handler for .focus() called." ); }); }); </script> </form> } 页面加载正常。我在我的模态中看到它...... 问题是我的页面 2.scala.html 中的脚本无法运行。我不明白为什么......如果我从我尝试在模态中加载的页面之外尝试它们，它们就会起作用...... $( document ).ready(function(){}); 永远不会在模态中到达，因为加载页面时已经触发了此事件（模态在之后加载...） 尝试直接插入脚本，如下所示： <script type="text/javascript"> $( "#first" ).focus(function() { alert( "Handler for .focus() called." ); }); </script> 当引导模式弹出时，shown.bs.modal事件将被触发。这是例子。 $('#myModal').on('shown.bs.modal', function () { $('#myInput').trigger('focus') }) Full documentation. https://getbootstrap.com/docs/4.0/components/modal/ 试试这个我已经准备好这个功能了 $('#myModal').on('shown.bs.modal', function () { // Your script here }); $(document).on('shown.bs.modal', '#myModal', function () { // Your script here });

在仪表针中设置弹出框（Echarts）

我有这段代码，我尝试将鼠标悬停在第一个仪表针上以获取 .popover({...}) 对象： </sc...</desc> <question vote="0"> <p>我有这段代码，我尝试将鼠标悬停在第一个仪表针上以获取 .popover({...}) 对象：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code> &lt;head&gt; &lt;script src=&#34;https://code.jquery.com/jquery-3.6.4.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.0/echarts.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js&#34;&gt;&lt;/script&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css&#34;&gt; &lt;title&gt;Gauge Chart&lt;/title&gt; &lt;/head&gt; &lt;button id=&#39;btn1&#39;&gt; Let&#39;s &lt;/button&gt; &lt;input id=&#39;slider1&#39; type=&#39;range&#39; value=&#39;34&#39; min=&#39;0&#39; max=&#39;100&#39; step=&#39;.01&#39;&gt; &lt;input id=&#39;slider2&#39; type=&#39;range&#39; value=&#39;89&#39; min=&#39;0&#39; max=&#39;100&#39; step=&#39;.01&#39;&gt; &lt;div id=&#39;chartid1&#39; style=&#39;width:390px; height: 410px;&#39;&gt;&lt;/div&gt; &lt;script&gt; const chart1 = echarts.init(document.getElementById(&#39;chartid1&#39;)); function update1(value1, value2) { option = { series: [{ type: &#39;gauge&#39;, min: 0, max: 100, splitNumber: 10, detail: { fontFamily: &#39;Lato&#39;, fontSize: 14, borderWidth: 1, borderColor: &#39;#020202&#39;, borderRadius: 5, width: 32, height: 20 }, data: [{ value: value1, name: &#39;False&#39;, itemStyle: { color: &#39;#dd4b50&#39; }, title: { offsetCenter: [&#39;-20%&#39;, &#39;20%&#39;] }, detail: { offsetCenter: [&#39;-20%&#39;, &#39;36%&#39;], backgroundColor: &#39;#dd4b50&#39;, color: &#39;#f2f2f2&#39; } }, { value: value2, name: &#39;True&#39;, itemStyle: { color: &#39;#3a9e4b&#39; }, title: { offsetCenter: [&#39;20%&#39;, &#39;20%&#39;] }, detail: { offsetCenter: [&#39;20%&#39;, &#39;36%&#39;], color: &#39;#f2f2f2&#39;, backgroundColor: &#39;#3a9e4b&#39; } } ] }] }; chart1.setOption(option); } function update2() { let value1 = Number($(&#39;#slider1&#39;).val()); let value2 = Number($(&#34;#slider2&#34;).val()); update1(value1, value2); } update2(); document.getElementById(&#39;btn1&#39;).addEventListener(&#39;click&#39;, function() { update2(); }) /// clickable chart1.on(&#39;mouseenter&#39;, {dataIndex:0}, function(params) { $(this).popover({ html: true, sanitize: false, title: &#39;Title &#39;, content: &#39;This a text&#39;, trigger: &#39;hover&#39;, placement: &#39;top&#39;, container: &#39;body&#39; }) }) &lt;/script&gt;</code></pre> </div> </div> <p></p> <p>我需要悬停并获得 .popover。我知道我可以使用 <pre><code>tooltip:{...}</code></pre>，但对于特定情况，我需要配置 .popover。我尝试用 <pre><code>mychart1.on(...</code></pre> 调整上面的代码，但没有成功。我添加了所有代码需求的CDN。</p> </question> <answer tick="false" vote="0"> <p>如果您查看 <a href="https://echarts.apache.org/en/api.html#events.Mouse%20events.mouseover" rel="nofollow noreferrer">文档</a>，该事件称为 <pre><code>mouseover</code></pre>，而不是 <pre><code>mouseenter</code></pre>。 <a href="https://echarts.apache.org/examples/en/editor.html?c=line-simple&code=PYBwLglsB2AEC8sDeAoWsDOBTAThLGAXLANprrLkWxgCeIWxA5AOYCGAri1kwDRUUAthGjEADP2rpBbAB7EAjGIkD0GEABsIYAHIdBAI1yKVU2ABMsYNhA3FUZ9ADMYYAGJthG2swAybMGA-VQoXaDAAZQgAL0ZYBQAWSUcDYBxLHAB1CHMwAAtFZLNU9NwAYWANNOYAYjEAJgaG4MdYEoyAJTZzCA4iWABWIqkAdxz84gBmeuHqPKwIFjywYkaQgF9ZiwC2YjJWh1bYADc2DQ44yaSQ6mhPOKYPDWwWo-0sQQi6DTjDo9gAMaVaqwJg1czmBIGAZiJg3CibeHoSBgH72JEUYBOJzYMBlLDhYykJgAWkaAFI-KCKUwALoYxH_SzWWzo_7oLE4qz4wk4Pakmm8UGTABslNpW2KbABAGsWDhgBxoOYKlU-aDwZDobDJVIgWrak56kajXD_ut4YzHH9HKdznEABwATl16DuggeABUcBdXq13p9vr8Meh9SCwZM2E6sFCzUcra0UWjKOzYJzcTywESSExBdSxOKGa6LFYbHYU-z09yCVn1Tm80xReLi6HgeqwSbjfU_UcDNK5QqlSq27VI9HYwzLSF6dQLeh6esANwoFeCWhlPJsHBgAB0MAAFExBIrsMBjrgqUhzDsAJLKrDyWBiTawJxKgGQA8gLeeDAASgrIFoAwSosB3KoWH3b8cF_P9l3WOCgA" rel="nofollow noreferrer">这里</a>是你的例子：</p> <pre><code>option = { series: [ { type: &#39;gauge&#39;, min: 0, max: 100, splitNumber: 10, detail: { fontFamily: &#39;Lato&#39;, fontSize: 14, borderWidth: 1, borderColor: &#39;#020202&#39;, borderRadius: 5, width: 32, height: 20 }, data: [ { value: 34, name: &#39;False&#39;, itemStyle: { color: &#39;#dd4b50&#39; }, title: { offsetCenter: [&#39;-20%&#39;, &#39;20%&#39;] }, detail: { offsetCenter: [&#39;-20%&#39;, &#39;36%&#39;], backgroundColor: &#39;#dd4b50&#39;, color: &#39;#f2f2f2&#39; } }, { value: 89, name: &#39;True&#39;, itemStyle: { color: &#39;#3a9e4b&#39; }, title: { offsetCenter: [&#39;20%&#39;, &#39;20%&#39;] }, detail: { offsetCenter: [&#39;20%&#39;, &#39;36%&#39;], color: &#39;#f2f2f2&#39;, backgroundColor: &#39;#3a9e4b&#39; } } ] } ] }; myChart.on(&#39;mouseover&#39;, {dataIndex: 0}, function(params) { console.log(params); }); </code></pre> </answer> </body></html>