.fade没有处理我的代码，但在w3School上使用相同的代码可以正常工作。(.fadeTo not working on my code, but works fine with same code on w3School. Why?)
所以基本上这适用于w3School但不适用于我的实时环境。 这是代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>Vecta Corp. Mobile</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <script> $(document).ready(function(){ $("#5").click(function(){ $("#yourview").fadeTo(1000, 0.05); }); }); </script> </head> <body> <section data-role="content"> <h2>Dr. Tint SolarPill Tint</h2> <h3>See how SolarPill looks from inside your tinted car</h3> <p><img alt="" src="images/tintshade.png" id="yourview" style="width:347px;"></p> <p style="width:350px;"> <input id="5" value="5%" style="font-size:12px;width: 36px;margin-left: 18px;" type="button"> </p> </section> </div> </body> </html>这是： w3school链接并将此代码粘贴到其中并尝试自己：
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("#5").click(function(){ $("#yourview").fadeTo(1000, 0.4); }); }); </script> </head> <body> <p><img alt="" src="http://www.mobile-tinting.com/img.png" id="yourview" style="width:347px;"></p> <input id="5" value="5%" style="font-size:12px;width: 36px;margin-left: 18px;" type="button"> </body> </html>这是与jquery mobile的冲突，因为这实际上是两个代码之间的唯一区别。 或者我在这里做错了什么？
So basically this works on w3School but not in my live environment. Here is the code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>Vecta Corp. Mobile</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <script> $(document).ready(function(){ $("#5").click(function(){ $("#yourview").fadeTo(1000, 0.05); }); }); </script> </head> <body> <section data-role="content"> <h2>Dr. Tint SolarPill Tint</h2> <h3>See how SolarPill looks from inside your tinted car</h3> <p><img alt="" src="images/tintshade.png" id="yourview" style="width:347px;"></p> <p style="width:350px;"> <input id="5" value="5%" style="font-size:12px;width: 36px;margin-left: 18px;" type="button"> </p> </section> </div> </body> </html>Here is the : w3school link and paste this code into it and try for yourself:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("#5").click(function(){ $("#yourview").fadeTo(1000, 0.4); }); }); </script> </head> <body> <p><img alt="" src="http://www.mobile-tinting.com/img.png" id="yourview" style="width:347px;"></p> <input id="5" value="5%" style="font-size:12px;width: 36px;margin-left: 18px;" type="button"> </body> </html>Is this a conflict with jquery mobile as that is literally the only difference between the two codes. Or am I doing something wrong here?
最满意答案
我刚刚在这个Codepen上做了几个例子。 按钮输入无法点击似乎是一个常见的问题（似乎是由于jQuery Mobile）。 你可以尝试其他一些方法来实现你想要做的事情：
请改用<button>标签 使用<a>标签，将data-role属性设置为button ，使其采用按钮样式。I just made a few examples on this Codepen. It seems a common problem that button inputs are unclickable (it seems to be due to jQuery Mobile). You can try a few other way to achieve what's you are trying to do:
Use a <button> tag instead Use a <a> tag, setting the data-role attribute to button so it adopts the button style.更多推荐
发布评论