代码无法在浏览器中工作，但可以在代码段工具中工作
[英]Code wont work in browser but works in snippet tool
问题描述
I can get my code to work in the snippet tool, but once I try to run this in my own browser when I click on the $12 button, no alert will show up. 
我可以在代码段工具中运行我的代码，但是当我尝试在自己的浏览器中单击$ 12按钮时运行此代码时，将不会显示任何警报。 Also, how can I get the alert to grab the header name so it displays "You have selected 1 gram of Skywalker". 另外，如何获取标题标题的警报，使其显示为“您已选择1克Skywalker”。
The only buttons I have working so far are 12 and 35. When a user selects a button, I want to alert them of the corresponding weight as well as the product name 到目前为止，我只能使用的按钮是12和35。当用户选择一个按钮时，我想提醒他们相应的重量以及产品名称
$(".btn1").click(function () { var number = $(this).closest("tr").find(".weight1").text(); var name =$(this).closest("h3").find(".itemName").text(); alert("You have selected " + number + " of " + name); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <title>Herb</title> <link rel="stylesheet" type="text/css" href="all.css"> <!--<script src="herb.js"></script>--> <script> $(".btn1").click(function () { var number = $(this).closest("tr").find(".weight1").text(); alert(number); }); </script> </head> <body> <div class="nav"> </div> <div class="center"> <label for="show-menu" class="show-menu">Show Menu</label> <input type="checkbox" id="show-menu" role="button"> <ul id="menu"> <li><a href="homepage.html">Home</a></li> <li><a href="deals.html">Deals!</a></li> <li> <a href="#">Menu ￬</a> <ul class="hidden"> <li><a href="herb.html">Herb</a></li> <li><a href="concentrate.html">Concentrates</a></li> <li><a href="edible.html">Edibles</a></li> </ul> </li> <li> <a href="#">Login ￬</a> <ul class="hidden"> <li><a href="login.html">Login</a></li> <li><a href="signup.html">Sign up</a></li> </ul> </li> <li> <a href="#">Social Media ￬</a> <ul class="hidden"> <li><a href="https://www.facebook.com" target="_blank">Facebook</a></li> <li><a href="https://www.snapchat.com/" target="_blank">Snapchat</a></li> <li><a href="https://www.instagram.com" target="_blank">Instagram</a></li> <li><a href="https://www.twitter.com" target="_blank">Twitter</a></li> </ul> </li> </ul> </div> <div class="menuwrapper"> <div class="one"> <h3 class="itemName">Skywalker</h3> <img src="Skywalker.png" alt="Skywalker" height="250" width="232"> <table> <tr> <td class="weight1">1 gram</td> <td class="price"><input id="button1" class="btn1" type="button" value="$12"></td> </tr> <tr> <td class="weight1">1/8 ounce</td> <td class="price"> <input class="btn1" type="button" name="item1" value="$35"></td> </tr> <tr> <td class="weight">1/4 ounce</td> <td class="price"><input class="btn" type="button" name="item1" value="$75"></td> </tr> <tr> <td class="weight">1/2 ounce</td> <td class="price"> <input class="btn" type="button" name="item1" value="$140"></td> </tr> <tr> <td class="weight">1 ounce</td> <td class="price"><input class="btn" type="button" name="item1" value="$275"></td> </tr> </table> </div> <div class="two"> <h3>Purple Urkle</h3> <img src="purple_urkle.jpg" alt="purple urkle" height="250" width="232"> <table> <tr> <td class="weight">1 gram</td> <td class="price"> <input class="btn" type="button" name="item1" value="$10"></td> </tr> <tr> <td class="weight">1/8 ounce</td> <td class="price"><input class="btn" type="button" name="item1" value="$30"></td> </tr> <tr> <td class="weight">1/4 ounce</td> <td class="price"><input class="btn" type="button" name="item1" value="$70"></td> </tr> <tr> <td class="weight">1/2 ounce</td> <td class="price"><input class="btn" type="button" name="item1" value="$130"></td> </tr> <tr> <td class="weight">1 ounce</td> <td class="price"><input class="btn" type="button" name="item1" value="$250"></td> </tr> </table> </div> <div class="three"> <h3>Blueberry</h3> <img src="Skywalker.png" alt="Blueberry" height="250" width="232"> <table> <tr> <td class="weight">1 gram</td> <td class="price"><input class="btn" type="button" name="item1" value="$12"></td> </tr> <tr> <td class="weight">1/8 ounce</td> <td class="price"><input class="btn" type="button" name="item1" value="$35"></td> </tr> <tr> <td class="weight">1/4 ounce</td> <td class="price"><input class="btn" type="button" name="item1" value="$75"></td> </tr> <tr> <td class="weight">1/2 ounce</td> <td class="price"><input class="btn" type="button" name="item1" value="$140"></td> </tr> <tr> <td class="weight">1 ounce</td> <td class="price"><input class="btn" type="button" name="item1" value="$275"></td> </tr> </table> </div> <div class="four"> <h3>Lucid Blue</h3> <img src="Skywalker.png" alt="Lucid blue" height="250" width="232"> <table> <tr> <td class="weight">1 gram</td> <td class="price"><input class="btn" type="button" name="item1" value="$12"></td> </tr> <tr> <td class="weight">1/8 ounce</td> <td class="price"><input class="btn" type="button" name="item1" value="$35"></td> </tr> <tr> <td class="weight">1/4 ounce</td> <td class="price"><input class="btn" type="button" name="item1" value="$75"></td> </tr> <tr> <td class="weight">1/2 ounce</td> <td class="price"><input class="btn" type="button" name="item1" value="$140"></td> </tr> <tr> <td class="weight">1 ounce</td> <td class="price"><input class="btn" type="button" name="item1" value="$275"></td> </tr> </table> </div> <div class="five"> <h3>Strawberry Cough</h3> <img src="Skywalker.png" alt="Strawberry cough" height="250" width="232"> <table> <tr> <td class="weight">1 gram</td> <td class="price"><input class="btn" type="button" name="item1" value="$12"></td> </tr> <tr> <td class="weight">1/8 ounce</td> <td class="price"><input class="btn" type="button" name="item1" value="$35"></td> </tr> <tr> <td class="weight">1/4 ounce</td> <td class="price"><input class="btn" type="button" name="item1" value="$75"></td> </tr> <tr> <td class="weight">1/2 ounce</td> <td class="price"><input class="btn" type="button" name="item1" value="$140"></td> </tr> <tr> <td class="weight">1 ounce</td> <td class="price"><input class="btn" type="button" name="item1" value="$275"></td> </tr> </table> </div> <div class="six"> <h3>Cactus OG</h3> <img src="Skywalker.png" alt="Cactus OG" height="250" width="232"> <table> <tr> <td class="weight">1 gram</td> <td class="price"><input class="btn" type="button" name="item1" value="$12"></td> </tr> <tr> <td class="weight">1/8 ounce</td> <td class="price"><input class="btn" type="button" name="item1" value="$35"></td> </tr> <tr> <td class="weight">1/4 ounce</td> <td class="price"><input class="btn" type="button" name="item1" value="$75"></td> </tr> <tr> <td class="weight">1/2 ounce</td> <td class="price"><input class="btn" type="button" name="item1" value="$140"></td> </tr> <tr> <td class="weight">1 ounce</td> <td class="price"><input class="btn" type="button" name="item1" value="$275"></td> </tr> </table> </div> <div class="seven"> <h3>Critical Cure</h3> <img src="Skywalker.png" alt="Critical Cure" height="250" width="232"> <table> <tr> <td class="weight">1 gram</td> <td class="price"><input class="btn" type="button" name="item1" value="$12"></td> </tr> <tr> <td class="weight">1/8 ounce</td> <td class="price"><input class="btn" type="button" name="item1" value="$35"></td> </tr> <tr> <td class="weight">1/4 ounce</td> <td class="price"><input class="btn" type="button" name="item1" value="$75"></td> </tr> <tr> <td class="weight">1/2 ounce</td> <td class="price"><input class="btn" type="button" name="item1" value="$140"></td> </tr> <tr> <td class="weight">1 ounce</td> <td class="price"><input class="btn" type="button" name="item1" value="$275"></td> </tr> </table> </div> <div class="eight"> <h3>Green Crack</h3> <img src="Skywalker.png" alt="Green Crack" height="250" width="232"> <table> <tr> <td class="weight">1 gram</td> <td class="price"><input class="btn" type="button" name="item1" value="$16"></td> </tr> <tr> <td class="weight">1/8 ounce</td> <td class="price"><input class="btn" type="button" name="item1" value="$55"></td> </tr> <tr> <td class="weight">1/4 ounce</td> <td class="price"><input class="btn" type="button" name="item1" value="$95"></td> </tr> <tr> <td class="weight">1/2 ounce</td> <td class="price"><input class="btn" type="button" name="item1" value="$185"></td> </tr> <tr> <td class="weight">1 ounce</td> <td class="price"><input class="btn" type="button" name="item1" value="$350"></td> </tr> </table> </div> </div> <!--end container --> </body> </html>
2 个解决方案
解决方案1
2 已采纳 2018-04-08 02:03:01
It is because when your script executes, it doesnot find the element with .btn1 class, because that html element is not created yet. 这是因为执行脚本时，找不到带有.btn1类的元素，因为尚未创建该html元素。
Use $( document ).ready(), to execute the script, after the document is loaded and ready. 加载文档并准备就绪后，请使用$（document）.ready（）执行脚本。
Replace your javascript with below code: 将您的JavaScript替换为以下代码：
$(document).ready(function(){
$(".btn1").click(function () {
var number = $(this).closest("tr").find(".weight1").text();
alert(number);
});
});
解决方案2
0 2018-04-08 02:56:08
Along with the answer from @jatinder-kumar, your jQuery script tag is not in the <head> tag. 连同@ jatinder-kumar的答案一起，您的jQuery脚本标记不在<head>标记中。 It is completely outside of your HTML document. 它完全在HTML文档之外。 If you want it in the head, you can use his code, if you move it to the bottom, before the close of the <body> tag, and your other scripts after it, you can avoid using the $(document).ready() . 如果想要放在头，可以使用他的代码，如果将其移到底部，在<body>标记关闭之前，以及在其后的其他脚本，则可以避免使用$(document).ready() 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
代码在JSFiddle中有效，但在浏览器中无效 - Code working in JSFiddle but wont work in browser
Javascript 代码在 JSFiddle 中有效，但在浏览器中无效 - Javascript code works in JSFiddle but does not work in browser
重复代码段：相同的代码段有效，但无效 - Repeating Code snippets: same snippet works and works not
在jsfiddle中工作，但在Dreamweaver中不工作 - Works in jsfiddle but it wont work in dreamweaver
jQuery代码无法正常工作 - jQuery code wont work
代码片段有效，但不在我的 html 文件中 - Code snippet works but not in my html file
jQuery / Ajax代码不适用于Firefox，但适用于其他浏览器 - jquery/ajax code don't work on firefox but on other browser works
我可以在浏览器上删除 HTML 代码片段吗 - Can I scrapping an HTML code snippet on browser
JS浏览器更新jQuery插件/代码片段 - JS Browser Update jQuery Plugin/Code Snippet
复选框检查器在表格中不起作用。 代码在没有 table 标签的情况下工作 - checkbox checker wont work in a table. code works without the table tag
相关标签