

Onsen UIのタブバーテンプレートから開発を進めていますが  
jQueryで要素にアクセスするのに困っています。  
Monaca/Onsen UI/Angularjs 全て初心者で何を掲載するべきか分からないため  
該当すると思われるコード箇所を記載致します。  
他ページでは$(function () {〜による表示時のjQueryの実行もできています。

[code]

        // Controller
        function checkSettings() {
            var settings;
            settings = JSON.parse(window.localStorage.getItem('settings'));
            if (settings.use) {
    
            } else {
                window.localStorage.setItem('settings', JSON.stringify({
                    use: true,
                    email: 'test@example.com',
                    site_display: true
                }));
                settings = JSON.parse(window.localStorage.getItem('settings'));
            }
            showSettings();
        }
    function showSettings() {
            var settings;
            settings = JSON.parse(window.localStorage.getItem('settings'));
            console.log(settings);
            $("#settings_input_email").val(settings.email);
            var name = document.getElementById("settings_input_name").value;
            alert($("#settings_input_email").val());
            alert(name);
            settings_input_site_display.setChecked(settings.site_display); //Switch
        }
    $(function () {
            checkSettings();
        });
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <ons-list>
    
                        <ons-list-header>会員</ons-list-header>
                        <ons-list-item>
                            <ons-row align="center" style="">
                                <ons-col size="50%" style="text-align: left;">
                                    <section style="">
                                        <div style="margin-top: 0;">メールアドレス</div>
                                    </section>
                                </ons-col>
    
                            </ons-row>
                            <ons-row align="center">
                                <ons-col>
                                    <section style="margin-bottom: 15px;">
                                        <input id="settings_input_email" type="text" class="text-input" ng-model="text" placeholder="email@example.com" style="display: block; width: 100%">
                                    </section>
                                </ons-col>
                            </ons-row>
                            <ons-row align="center" style="">
                                <ons-col size="50%" style="text-align: left;">
                                    <section style="">
                                        <div style="margin-top: 0;">表示名</div>
                                    </section>
                                </ons-col>
    
                            </ons-row>
                            <ons-row align="center">
                                <ons-col>
                                    <section style="margin-bottom: 15px;">
                                        <input id="settings_input_name" type="text" class="text-input" ng-model="text" placeholder="お名前" style="display: block; width: 100%">
                                    </section>
                                </ons-col>
                            </ons-row>
                        </ons-list-item>
    
                        <ons-list-header>表示</ons-list-header>
                        <ons-list-item>
                            <ons-row align="center" style="">
                                <ons-col size="50%" style="text-align: left;">
                                    <section style="">
                                        <div style="margin-top: 0;">サイトの表示</div>
                                    </section>
                                </ons-col>
                                <ons-col>
                                    <section style="text-align: right;margin-top: 10px;">
                                        <ons-switch var="settings_input_site_display" id="settings_input_site_display"></ons-switch>
                                    </section>
                                </ons-col>
                            </ons-row>
                        </ons-list-item>
    
                    </ons-list>
[/code]

コード内で出力しているlocalstrageの内容は正常に動作しており、下記の通りです。

[code]

    Object {use: true, email: "test@example.com", site_display: true}
    
[/code]

エラー内容は下記の通りです。

[code]

    TypeError: Cannot read property 'value' of null
    at showSettings 
    
[/code]

表示後にコンソールから実行した下記のコードは問題なく動作しました

[code]

    $('#settings_input_email').val();
    document.getElementById('settings_input_email').value;
    $('#settings_input_email').val('test');
    document.getElementById('settings_input_email').value = 'test';
    
[/code]

showSettings()関数内で `console.log($("#settings_input_email").val());`
を実行すると、`undefined`が返却されます。

また、テンプレートから作成し、LocalKitにてjQueryを有効化しましたが  
下記エラーも発生しており、これが原因ではないかと思っていますが  
全てloaderにて読み込んでいるため解決策が分かりません。

[code]

    Onsen UI require jqLite. 
    Load jQuery after loading AngularJS to fix this error. 
    jQuery may break Onsen UI behavior.
    
[/code]

宜しくお願い致します。

**追記**

index.html に `ons.bootstrap()`、`ons.ready()`のみ記述していたため  
個別のページに `ons.ready()`、`deviceready` を追記しました。

[code]

    <script>
        document.addEventListener("deviceready", function () {
        ons.ready(function () {
            checkSettings();
        });
    }, false);
    </script>
    
[/code]

iPhoneのデバッガー上のLogにのみエラーが出力されました。  
`Error: undefined is not an object (evaluting …` の1行のみ読み取れました。

また、下記のコードだと実行出来ることが分かりました。

[code]

    $(function () {
        setTimeout(function () {
            $("ons-button#call_button").trigger("click");
        }, 100);
    });
    
    <ons-button id="call_button" modifier="large light" onclick="checkSettings()">設定再読み込み</ons-button>
    
[/code]


CC BY-SA 3.0
2016-06-05T19:28:09.670
26481
2016-06-06T04:11:45.293
2016-06-06T04:11:45.293
16764
16764
question
monaca jquery onsen-ui angularjs
Monaca/Onsen UI で jQuery での操作が出来ない場合がある