click 相关问题

代码： $("#clicker").click(function () { 麦酒...</desc> <question vote="135"> <p>代码：</p> <pre><code><script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script type="text/javascript"> $("#clicker").click(function () { alert("Hello!"); $(".hide_div").hide(); }); </script> </code></pre> <p>上面的代码不起作用。当我单击#clicker 时，它不会发出警报，也不会隐藏。我检查了控制台，没有发现任何错误。我还检查了 JQuery 是否正在加载，确实如此。所以不确定问题是什么。我还做了一个带有警报的文档准备功能，并且效果很好，所以不确定我做错了什么。请帮忙。谢谢！</p> </question> <answer tick="true" vote="220"> <p>您应该在 <pre><code>$(document).ready(function() {});</code></pre> 块中添加 javascript 代码。</p> <p>即</p> <pre><code>$(document).ready(function() { $("#clicker").click(function () { alert("Hello!"); $(".hide_div").hide(); }); }); </code></pre> <p>正如 <a href="https://learn.jquery.com/using-jquery-core/document-ready/" rel="noreferrer" title="jQuery documentation">jQuery 文档</a> 所说：“在文档“准备好”之前，无法安全地操作页面。jQuery 会为您检测到这种准备状态。<pre><code>$( document ).ready()</code></pre> 中包含的代码只会在页面文档对象模型 ( DOM) 已准备好执行 JavaScript 代码”</p> </answer> <answer tick="false" vote="101"> <p>我通过将 ON 与 $(document) 一起使用找到了解决此问题的最佳解决方案。</p> <pre><code> $(document).on('click', '#yourid', function() { alert("hello"); }); </code></pre> <p>对于 id 开头，请参阅下文：</p> <pre><code>$(document).on('click', 'div[id^="start"]', function() { alert ('hello'); }); </code></pre> <p>1 周后我终于不需要添加 onclick 触发器了。我希望这能帮助很多人</p> </answer> <answer tick="false" vote="25"> <p>您的代码可以在没有 document.ready() 的情况下工作，只需确保您的脚本位于#clicker 之后。查看此演示：<a href="http://jsbin.com/aPAsaZo/1/" rel="noreferrer">http://jsbin.com/aPAsaZo/1/</a></p> <p>准备好的概念中的想法。如果您确定您的脚本是页面中的最新内容或者位于受影响的元素之后，那么它将起作用。</p> <pre><code><!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <a href="#" id="clicker" value="Click Me!" >Click Me</a> <script type="text/javascript"> $("#clicker").click(function () { alert("Hello!"); $(".hide_div").hide(); }); </script> </body> </html> </code></pre> <p><strong>注意事项：</strong> 在 <a href="/questions/tagged/jsbin" rel="tag" title="show questions tagged 'jsbin'">jsbin</a> 演示中，将代码中的 <pre><code>http</code></pre> 替换为 <pre><code>https</code></pre>，或使用此变体 <a href="https://output.jsbin.com/tetovusowo" rel="noreferrer">Demo</a></p> </answer> <answer tick="false" vote="6"> <p>尝试将 <pre><code>$(document).ready(function(){</code></pre> 添加到脚本的开头，然后添加 <pre><code>});</code></pre>。另外，<pre><code>div</code></pre>中是否有正确的id，即作为id，而不是类等？</p> </answer> <answer tick="false" vote="6"> <p>你必须用<pre><code>$(document).ready(function(){});</code></pre>包装你的Javascript代码，看看这个<a href="http://jsfiddle.net/7s3yB/" rel="noreferrer">JSfiddle</a>。</p> <p><strong>JS代码：</strong></p> <pre><code>$(document).ready(function() { $("#clicker").click(function () { alert("Hello!"); $(".hide_div").hide(); }); }); </code></pre> </answer> <answer tick="false" vote="3"> <p>确保按钮上没有任何东西（例如 div 或透明 img）阻止单击按钮。这听起来很愚蠢，但有时我们认为 jQuery 不起作用，所有这些问题都出在 DOM 元素的定位上。 </p> </answer> <answer tick="false" vote="3"> <p>您可以使用 <pre><code>$(function(){ // code });</code></pre>，当文档准备好执行该块内的代码时执行。</p> <pre><code>$(function(){ $('#clicker').click(function(){ alert('hey'); $('.hide_div').hide(); }); }); </code></pre> </answer> <answer tick="false" vote="2"> <p>快速检查一下，如果您使用的是客户端模板引擎（例如handlebars），您的js将在document.ready之后加载，因此不会有任何元素可以绑定事件，因此要么使用onclick处理程序，要么在身体并检查当前目标 </p> </answer> <answer tick="false" vote="0"> <h3>正确的浏览器重新加载</h3> <p>快速检查一下您是否单独保存 js 文件：确保正确重新加载资源。浏览器通常会缓存文件，因此只需确保您加载的资源中之前的拼写错误已得到纠正。</p> <p>请参阅<a href="https://superuser.com/a/406331">此答案</a>，了解 Chrome/Chromium 中永久禁用缓存的信息。否则，您通常可以使用 <kbd>Ctrl</kbd>+<kbd>F5</kbd> 或 <kbd>Shift</kbd>+<kbd>F5</kbd> 强制完全重新加载，如<a href="https://superuser.com/a/89811">此答案</a>中所述。</p> </answer> <answer tick="false" vote="0"> <p>两个代码片段之间的不同行为与单击事件如何绑定到页面上的元素以及事件委托的概念有关。如果您的 HTML 是动态生成的，您需要将代码更改为：</p> <pre><code>$(document).on('click', 'clicker', function() { alert("Hello!"); $(".hide_div").hide(); }); </code></pre> </answer> </body></html>

javascript jquery onclick click onclicklistener

回答 0 投票 0

Vue 在 @click 处执行方法不起作用

我有一个带有导航栏和一些项目的 Vue 应用程序： ... 我有一个带有导航栏和一些项目的 Vue 应用程序： <div id="navbarBasicExample" class="navbar-menu"> <div class="navbar-start"> <a @click="test" class="navbar-item"> Home </a> <a @click="test" class="navbar-item"> Shopping </a> </div> </div> 测试方法如下： const test = () => { console.log("testt") } 当我单击其中一个标签时，浏览器控制台中没有任何反应。我在 Vue 文件和组合 api 中使用 typescript 作为脚本语言。我也尝试过 @click="asdf()" 但后来我得到的输出是 test 不起作用。有人知道我犯了哪个错误吗？这是完整的文件： <template> <nav class="navbar is-primary" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <a class="navbar-item" href="https://bulma.io"> <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32" height="32" viewBox="0 0 32 32"> <path d="M 12 4 C 9.8026661 4 8 5.8026661 8 8 C 5.8026661 8 4 9.8026661 4 12 L 4 24 C 4 26.197334 5.8026661 28 8 28 L 20 28 C 22.197334 28 24 26.197334 24 24 C 26.197334 24 28 22.197334 28 20 L 28 8 C 28 5.8026661 26.197334 4 24 4 L 12 4 z M 12 6 L 24 6 C 25.116666 6 26 6.8833339 26 8 L 26 20 C 26 21.116666 25.116666 22 24 22 L 11 22 C 10.43497 22 10 21.56503 10 21 L 10 14 L 12 14 L 12 18 C 12 19.093063 12.906937 20 14 20 L 18 20 L 20 20 L 22 20 C 23.093063 20 24 19.093063 24 18 L 24 11 C 24 9.3550302 22.64497 8 21 8 L 10 8 C 10 6.8833339 10.883334 6 12 6 z M 8 10 L 21 10 C 21.56503 10 22 10.43497 22 11 L 22 18 L 20 18 L 20 14 C 20 12.906937 19.093063 12 18 12 L 14 12 L 12 12 L 10 12 C 8.9069372 12 8 12.906937 8 14 L 8 21 C 8 22.64497 9.3550302 24 11 24 L 22 24 C 22 25.116666 21.116666 26 20 26 L 8 26 C 6.8833339 26 6 25.116666 6 24 L 6 12 C 6 10.883334 6.8833339 10 8 10 z M 14 14 L 18 14 L 18 18 L 14 18 L 14 14 z"></path> </svg> </a> <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </a> </div> <div id="navbarBasicExample" class="navbar-menu"> <div class="navbar-start"> <a @click="test" class="navbar-item"> Home </a> <a @click="asdf" class="navbar-item"> Shopping </a> </div> </div> </nav> </template> <script lang="ts"> import { useRouter } from 'vue-router'; const router = useRouter(); const test = () => { console.log("testt") } </script> 我忘记将设置添加到脚本标签中。现在可以用了

javascript typescript vue.js click

回答 1 投票 0

click 相关问题

最新问题