麻烦从jQuery .load（）在html页面加载时加载javascript

Question

Working on a personal project with a navigation bar. 使用导航栏处理个人项目。 I am using jquery x.load() to load html pages into a specific div. 我正在使用jquery x.load（）将html页面加载到特定的div中。 The pages load correctly into the div. 页面正确加载到div中。 However, one of the is using a jquery flipswitch. 但是，其中之一正在使用jquery flipswitch。 I am trying to read the state of this flipswitch, to no prevail. 我试图读取此翻盖开关的状态，以至于不占优势。 I have a main javascript file that loads the individual pages, which is basically my x.load(). 我有一个主要的javascript文件，可加载各个页面，基本上是我的x.load（）。 I have a working jquery script for reading the switch state, that works when placed directly into the developers console. 我有一个工作的jquery脚本，用于读取开关状态，当将其直接放置在开发人员控制台中时可以运行。 I have attempted this code both inline in the individual page as well as my main javascript file. 我已经尝试在单个页面以及我的主要javascript文件中内联此代码。 When I place it inside the individual page, it will at times cause a race condition to develop. 当我将其放在单独的页面内时，有时会导致竞争状况的发展。

I am looking for any suggestions, advice, or direction on being able to read the status of the flipswitch from the individual pages. 我正在寻找有关能够从各个页面读取翻页开关状态的任何建议，建议或方向。

The first section of code is my javascript file. 代码的第一部分是我的JavaScript文件。 The second section of code, is both my individual page, as well as my main html page that loads the individual html page, respectively. 代码的第二部分既是我的个人页面，又是分别加载个人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>

Answer 1

As you are using jQuery Mobile Flipswitch of type checkbox , you can get the status by checking the property checked . 当你正在使用jQuery Mobile的Flipswitch类型的checkbox ，您可以通过检查属性获取状态checked 。 Here is a jQuery Mobile Flipswitch playground : 这是一个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>

By using the change event instead of click you will be notified of the flipswitch toggling also if you are setting the status in code. 如果使用代码设置状态，则通过使用change事件而不是click事件，也将通知您flipswitch切换。

Additional notes: 补充笔记：

About what you are defining " race condition " i believe you are referring to one of the common mistakes when using jQuery Mobile, ie document.ready vs. page events . 关于您定义的“ 竞态条件 ”，我相信您指的是使用jQuery Mobile时常见的错误之一，即document.ready与page events 。 Please read this post here , and also take some time to read the whole story in deep in this great post of Omar here: jQuery Mobile “Page” Events – What, Why, Where, When & How? 请在此处阅读此文章，并花一些时间在此Omar的重要文章中深入阅读整个故事： jQuery Mobile“页面”事件–什么，为什么，在哪里，何时何地？ (you will find here some other useful posts about this topic). （您将在此处找到有关此主题的其他有用文章）。

Moreover: you are trying to update the flipswtches manually by setting the ui-flipswitch-active class by yourself, but i believe you will run into the problem of keeping the status and the ui consistent. 此外：您正在尝试通过自己设置ui-flipswitch-active类来手动更新flipswtches ，但是我相信您会遇到保持状态和ui一致的问题。 So, you may better use the standard JQM way to set the flipswitch status by using flipswitch.refresh . 因此，您最好使用标准的JQM方法通过使用flipswitch.refresh来设置flipswitch状态。 There is already an example in my code snippet. 我的代码段中已经有一个示例。

The last note: until you strongly need it - and you know how to versioning jQuery Mobile - please use the same version of these libraries in all your files, so in your case i believe the pair jQuery 2.1 + JQM 1.4.5 shall be just fine. 最后一点：在您非常需要它之前-并且您知道如何对jQuery Mobile进行版本控制-请在所有文件中使用这些库的相同版本，因此在您的情况下，我认为jQuery 2.1 + JQM 1.4.5对应该只是精细。

Answer 2

 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>

麻烦从jQuery .load（）在html页面加载时加载javascript

问题描述

2 个解决方案

解决方案1
1 已采纳 2017-08-28 08:51:09

解决方案2
0 2017-08-28 03:03:40

麻烦从jQuery .load（）在html页面加载时加载javascript

问题描述

2 个解决方案

解决方案1 1 已采纳 2017-08-28 08:51:09

解决方案2 0 2017-08-28 03:03:40

解决方案1
1 已采纳 2017-08-28 08:51:09

解决方案2
0 2017-08-28 03:03:40