jQuery Show / Hide在Android上不起作用

Question

I am working with a mobile app in Phongap and Cordova. Using OnsenUI.

In one page I have an ons-switch elements that shows and hide a select html element.

The peculiar thing of this is that the js code that shows and hides the select when touching the ons-switch works fine on iOS (tested on iPhone 5S) and on the Android Emulator, but when I deploy the app on my Samsung Galaxy S4 (Android 4.3) the script doesn't work, it doesn't hide/show the select.

The Android version that the code is not working is 4.3. The phonegap version is 4.2.0-0.25.0. The Cordova version is 4.3.0.

Here is my code:

    <ons-page>

        <ons-toolbar>
            <div class="left"><ons-back-button>Back</ons-back-button></div>
            <div class="center">MyPage</div>
        </ons-toolbar>

        <div style="text-align:center">
            <div style="margin-top:5%;width:100%;">
                <input class="text-input" id="my-input">
            </div>

            <div style="width:100%;float:left;clear:both">
                <label>Show Select 1</label>
                <ons-switch var="switch1" onchange="ShowSelect1()"></ons-switch>
                <select id="select1"></select>
            </div>

            <div>
                    <label>Show Select 2</label>
                    <ons-switch var="switch2" onchange="showSelect2()"></ons-switch>
                  <select id="select2"></select>
            </div>
</div>
    </ons-page>

My Js Code:

 function ShowSelect1() {
            var item = $("#select1");
            if (switch1.isChecked()) {
                 item.show();
            } else {
                item.hide();
            }
        }

        function ShowSelect2() {
            var item = $("#select2");
            if (switch2.isChecked()) {
                item.show();
            } else {
                item.hide();
            }
        }

Answer 1

Don't use jQuery hide and show for something like this, use the Angular that onsen is based on. Use an ng-show or ng-hide and base it off of a scope value. You aren't showing enough of your code to properly show you a fix, but something like:

<ons-switch var="switch2" ng=change="select2Hiding = !select2Hiding"></ons-switch>
<select id="select2" ng-hide="select2Hiding"></select>

in your html and remove the JS Code...

Answer 2

The jQuery used by Angular is overriden by a version of jQuery for Angular's purpose. Both $.hide() and $.show() are overriden by ng-show and ng-hide .

Use those and everything will work fine.