麻烦从jQuery .load（）在html页面加载时加载javascript
[英]trouble loading javascript on html page load from jquery .load()
问题描述
使用导航栏处理个人项目。 我正在使用jquery x.load（）将html页面加载到特定的div中。 页面正确加载到div中。 但是，其中之一正在使用jquery flipswitch。 我试图读取此翻盖开关的状态，以至于不占优势。 我有一个主要的javascript文件，可加载各个页面，基本上是我的x.load（）。 我有一个工作的jquery脚本，用于读取开关状态，当将其直接放置在开发人员控制台中时可以运行。 我已经尝试在单个页面以及我的主要javascript文件中内联此代码。 当我将其放在单独的页面内时，有时会导致竞争状况的发展。
我正在寻找有关能够从各个页面读取翻页开关状态的任何建议，建议或方向。
代码的第一部分是我的JavaScript文件。 代码的第二部分既是我的个人页面，又是分别加载个人html页面的主要html页面。
jQuery(document).ready(function() {
var SideNav = $('.side-nav'),
NavTrigger = $('.nav-trigger'),
Content = $('.content'),
ApartmentAlarm = $('#Alarm'),
$('.ui-flipswitch').click(function(){console.log($(this).hasClass('ui-flipswitch-active') ? 'On' : 'Off')})
NavTrigger.on('click', function(event) {
event.preventDefault();
alert("click works");
$([SideNav, NavTrigger]).toggleClass('nav-visible');
});
ApartmentAlarm.on('click', function() {
//event.preventDefault();
Content.load('alarm.html');
$([SideNav, NavTrigger]).toggleClass('nav-visible');
});
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<form>
<label for="LeftSwitch">Left Light:</label>
<input type="checkbox" data-role="flipswitch" name="LeftSwitch" id="LeftSwitch">
<br>
<label for="RightSwitch">Right Light</label>
<input type="checkbox" data-role="flipswitch" name="RightSwitch" id="RightSwitch">
</form>
<script type="text/javascript">
$(document).ready(function() {
console.log('hello');
$('#LeftSwitch').on('flipswitchcreate', function(event, ui) {
alert('me')
});
//$('.ui-flipswitch').click(function(){console.log($(this).hasClass('ui-flipswitch-active') ? 'On' : 'Off')})
})
</script>
</body>
</html>
<html>
<head>
<title>
</title>
<link rel="stylesheet" href="apt.css">
</head>
<body>
<header class="page-header">
<div class="apartment-name">Carlson Casa</div>
<div class="data-top">
<ul class="top-data">
<li>Time</li>
<li>Outside Temp</li>
<li>Inside Temp</li>
<li><a href="#0" class="nav-trigger">Menu<span></span></a></li>
</ul>
</div>
</header>
<main class="main-content">
<nav class="side-nav">
<ul>
<li><a href="#">Apartment</a></li>
<li class="nav-label">Living Room</li>
<li><a href="#" id="Alarm">Alarm control</a></li>
<li><a href="#" id="Chandelier">Chandelier</a></li>
<li class="nav-label">Bedroom</li>
<li><a href="#" id="BedroomLights">Lights</a></li>
<li><a href="#" id="AlarmClock">Alarm Clock</a></li>
</ul>
</nav>
<div class="content">
Controls go here
</div>
</main>
<script src="jquery-2.1.4.js"></script>
<script src="main.js"></script>
</body>
</html>
2 个解决方案
解决方案1
1 已采纳 2017-08-28 08:51:09
当你正在使用jQuery Mobile的Flipswitch类型的checkbox ，您可以通过检查属性获取状态checked 。 这是一个jQuery Mobile Flipswitch游乐场 ：
var cases = {false: "Unchecked", true: "Checked"}; function getStatus() { $("#statusLeft").html(cases[$("#LeftSwitch").prop("checked")]); $("#statusRight").html(cases[$("#RightSwitch").prop("checked")]); } $(document).on("change", "#LeftSwitch", function(e) { var status = $(this).prop("checked"); $("#statusLeft").html("Changed to "+cases[status]); }); $(document).on("change", "#RightSwitch", function(e) { var status = $(this).prop("checked"); $("#statusRight").html("Changed to "+cases[status]); }); function toggleLeft() { var status = $("#LeftSwitch").prop("checked"); $("#LeftSwitch").prop("checked", !status).flipswitch("refresh"); } function toggleRight() { var status = $("#RightSwitch").prop("checked"); $("#RightSwitch").prop("checked", !status).flipswitch("refresh"); }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="content"> <form> <label for="LeftSwitch">Left Light:</label> <input type="checkbox" data-role="flipswitch" name="LeftSwitch" id="LeftSwitch"> <span id="statusLeft">Unchecked</span> <br> <label for="RightSwitch">Right Light</label> <input type="checkbox" data-role="flipswitch" name="RightSwitch" id="RightSwitch"> <span id="statusRight">Unchecked</span> </form> <button class="ui-btn" onclick="getStatus();">Get Status</button> <button class="ui-btn" onclick="toggleLeft();">Toggle Left</button> <button class="ui-btn" onclick="toggleRight();">Toggle Right</button> </div> </div> </body> </html>
如果使用代码设置状态，则通过使用change事件而不是click事件，也将通知您flipswitch切换。
补充笔记：
关于您定义的“ 竞态条件 ”，我相信您指的是使用jQuery Mobile时常见的错误之一，即document.ready与page events 。 请在此处阅读此文章，并花一些时间在此Omar的重要文章中深入阅读整个故事： jQuery Mobile“页面”事件–什么，为什么，在哪里，何时何地？ （您将在此处找到有关此主题的其他有用文章）。
此外：您正在尝试通过自己设置ui-flipswitch-active类来手动更新flipswtches ，但是我相信您会遇到保持状态和ui一致的问题。 因此，您最好使用标准的JQM方法通过使用flipswitch.refresh来设置flipswitch状态。 我的代码段中已经有一个示例。
最后一点：在您非常需要它之前-并且您知道如何对jQuery Mobile进行版本控制-请在所有文件中使用这些库的相同版本，因此在您的情况下，我认为jQuery 2.1 + JQM 1.4.5对应该只是精细。
解决方案2
0 2017-08-28 03:03:40
jQuery(document).ready(function() { var SideNav = $('.side-nav'), NavTrigger = $('.nav-trigger'), Content = $('.content'), ApartmentAlarm = $('#Alarm'); $('.ui-flipswitch').click(function(){console.log($(this).hasClass('ui-flipswitch-active') ? 'On' : 'Off')}); NavTrigger.on('click', function(event) { event.preventDefault(); alert("click works"); $([SideNav, NavTrigger]).toggleClass('nav-visible'); }); ApartmentAlarm.on('click', function() { //event.preventDefault(); Content.load('alarm.html'); $([SideNav, NavTrigger]).toggleClass('nav-visible'); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> <title></title> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <form> <label for="LeftSwitch">Left Light:</label> <input type="checkbox" data-role="flipswitch" name="LeftSwitch" id="LeftSwitch"> <br> <label for="RightSwitch">Right Light</label> <input type="checkbox" data-role="flipswitch" name="RightSwitch" id="RightSwitch"> </form> <script type="text/javascript"> $(document).ready(function() { console.log('hello'); $('#LeftSwitch').on('flipswitchcreate', function(event, ui) { alert('me') }); //$('.ui-flipswitch').click(function(){console.log($(this).hasClass('ui-flipswitch-active') ? 'On' : 'Off')}) }) </script> </body> </html>
通过重定向加载html页面以从javascript加载图像
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.