29385


初歩的な質問になります。  
monacaの「スライディングメニュー」のテンプレートを使い、  
スライディングメニュー上にボタンを配置し、  
そのクリックをindex.htmlで受け取り処理をしたいと思います。

以下のプログラムを書いたのですが、スライディングメニューのボタンをクリックしても、  
クリックが受け取れません（console.log("aaa")が書き出されません）。

index.html

[code]

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
        <script src="components/loader.js"></script>
        <link rel="stylesheet" href="components/loader.css">
        <link rel="stylesheet" href="css/style.css">
        <script>
            ons.bootstrap();
            $(function(){
                $('.btn1').on('click',function() {
                    console.log("aaa");
                });
            });
        </script>
    </head>
    <body>
        <ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="page1.html" side="left" type="overlay" max-slide-distance="200px">
        </ons-sliding-menu>
    </body>
    </html>
    
[/code]

menu.html

[code]

    <ons-page style="background-color: white">
        <ons-list>
            <ons-list-item modifier="chevron" class="btn1">
                メニュー１
            </ons-list-item>
        </ons-list>
    </ons-page>
    
[/code]

スライディングメニュー上のクリックを受け取るには、どうすればいいのでしょうか？  
どなたかお教えいただけますようお願い致します。

どうぞよろしくお願いいたします。


CC BY-SA 3.0
2016-10-05T09:29:01.383
29375
2016-10-06T05:41:30.583
18800
question
monaca
monaca スライディングメニューページでのclickの受け取り


こんにちは  
私はjQueryの知識がないため、記載して頂いたコードをそのまま動作させることはできないのですが、  
特にjQueryを使用しなくても良いのであれば、以下のように記述してはいかがでしょうか。

index.html

[code]

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
        <script src="components/loader.js"></script>
        <link rel="stylesheet" href="components/loader.css">
        <link rel="stylesheet" href="css/style.css">
        <script>
            ons.bootstrap();
            var tap = function(){
                console.log("test message");
            }
        </script>
    </head>
    <body>
        <ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="page1.html" side="left" type="overlay" max-slide-distance="200px">
        </ons-sliding-menu>
    </body>
    </html>
    
[/code]

menu.html

[code]

    <ons-page style="background-color: white">
    
        <ons-list>
            <ons-list-item modifier="chevron" onclick="tap()">
                メニュー１
            </ons-list-item>
        </ons-list>
    
    </ons-page>
    
[/code]

また、jQueryが動作しないということであれば、MonacaIDEの「設定」→「JS/CSSコンポーネントの追加と削除」からjQueryのコンポーネントを追加も試してみてはいかがでしょうか。

以上です。


CC BY-SA 3.0
2016-10-06T05:41:30.583
29385
2016-10-06T05:41:30.583
18729
29375
answer