个人中心
gpt4 book ai didi

javascript - 无法调用未获取 page.matches OnSenUi 的函数

转载 作者：行者123 更新时间：2023-12-03 04:41:03 25 4
gpt4 key购买 nike

附加项目HERE

我已经浪费了我的一生(实际上是一周)来解决这个问题。我正处于混合应用程序开发的开始阶段，这件事正在伤害我。我正在 Cordova 工作，并使用 OnSen UI 作为开发应用程序的框架。我的 JavaScrip 和 jQuery 一切都很好，但我无法从 onClick 调用函数方法。

我想要的是，里面:

<ons-template id="fetchPage.html"> ,我有div与 id="divFtechHere"我想找到它并想​​打电话:

if (page.matches('#fetchPage.html')) {
page.querySelector('#divFtechHere').onclick = function() {
    console.log ("list Item Clicked!");
    alert('Now clicked');
 };
} // page.matches('#fetchPage.html')

但这不起作用。

最终，我想要实现的是:当我想点击#myListElement时(有项目列表)，它返回给我 ID这样我就可以从网络服务器获取更多信息。请帮我解决这个问题。如果您能帮助修复我的整个问题，我会很高兴 document.addEventListener('init', function (event)我想我在那里也做错了什么。谢谢。

这是我的整个代码:

index.html

<!DOCTYPE html>
<html>
<head>
    <title>My New App</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/onsenui.css" />
    <link rel="stylesheet" href="css/onsen-css-components.css" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!--    <script src="js/jquery-3.1.1.min.js"></script>-->
    <script src="js/onsenui.js"></script>
    <script src="js/myJs.js"></script>
</head>

<body>
    <ons-splitter>
        <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
            <ons-page>
                <ons-list>
                    <ons-list-item onclick="fn.load('home.html')" tappable> Home </ons-list-item>
                    <ons-list-item onclick="fn.load('settings.html')" tappable> Settings </ons-list-item>
                    <ons-list-item onclick="fn.load('about.html')" tappable> About </ons-list-item>
                    <ons-list-item id="ons-list-fetch" onclick="fn.load('fetchPage.html');" tappable> Fetch Data </ons-list-item>

                </ons-list>
            </ons-page>
        </ons-splitter-side>
        <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
    </ons-splitter>
    <ons-template id="home.html">
        <ons-page id="helloworld-page">
            <ons-toolbar>
                <div class="left">
                    <ons-toolbar-button onclick="fn.open()">
                        <ons-icon icon="md-menu"></ons-icon>
                    </ons-toolbar-button>
                </div>
                <div class="center"> Main </div>
            </ons-toolbar>
            <p style="text-align: center; opacity: 0.6; padding-top: 20px;"> Swipe right to open the menu! </p>

<!--            Inputs-->
            <h2 style="text-align: center; opacity: 0.6;">---</h2>
            <div style="text-align: center; margin-top: 30px;">
                <p>
                    <ons-input id="username" modifier="underbar" placeholder="Username" float></ons-input>
                </p>
                <p>
                    <ons-input id="password" modifier="underbar" type="password" placeholder="Password" float></ons-input>
                </p>
                <p style="margin-top: 30px;">
                    <ons-button id="btnSignIn" style="width: 90px;" >Sign in</ons-button>
                    <ons-button id="btnClickMe">Click mee!</ons-button>
                </p>

    <section style="padding: 8px">
    <ons-button modifier="quiet">Forgot Password</ons-button>
    </section>
    </div>      
<!--    eof Inputs-->
<p style="text-align: center; font-size: 14px; opicity: 0.6"> All rights reserved </p>
    </ons-page>
    </ons-template>
    <ons-template id="settings.html">
        <ons-page>
            <ons-toolbar>
                <div class="left">
                    <ons-toolbar-button onclick="fn.open()">
                        <ons-icon icon="md-menu"></ons-icon>
                    </ons-toolbar-button>
                </div>
                <div class="center"> Settings </div>
            </ons-toolbar>
        </ons-page>
    </ons-template>
    <ons-template id="about.html">
        <ons-page>
            <ons-toolbar>
                <div class="left">
                    <ons-toolbar-button>
                        <ons-icon icon="md-menu"></ons-icon>
                    </ons-toolbar-button>
                </div>
                <div class="center"> About </div>
            </ons-toolbar>
        </ons-page>
    </ons-template>
<!--    FetchPage-->
    <ons-template id="fetchPage.html">
        <ons-page id="fetchPage2.html">
            <ons-toolbar>
                <div class="left">
                    <ons-toolbar-button onclick="fn.open()">
                        <ons-icon icon="md-menu"></ons-icon>
                    </ons-toolbar-button>
                </div>
                <div class="center"> Fetch </div>
            </ons-toolbar>

<ons-list modifier="inset" id="myListElement">
    <ons-list-header >My Inset listdc</ons-list-header>
    <ons-list-item modifier="longdivider" tappable>Item A</ons-list-item>
    <ons-list-item modifier="longdivider" tappable>Item B</ons-list-item>
    <ons-list-item modifier="longdivider" tappable>Item C</ons-list-item>
</ons-list> 

<div id="divFtechHere">Here</div>
    </ons-page>     
    </ons-template>
    <!--eof Old Script-->   
    </body>
</html>

myJs.js

$(document).ready(function() {
    console.log("Code Loaded");

//      $('#divFtechHere').onclick = function() {
//          //event.preventDefault();
//          console.log ("list Item Clicked!");
//          alert('Now clicked');
//     };

document.addEventListener('init', function (event) {
  var page = event.target;
  if (page.matches('#helloworld-page')) {
     page.querySelector('#btnSignIn').onclick = function() {
         addFunction();
     };

     page.querySelector('#btnClickMe').onclick = function() {
       //ons.notification.alert('Hello Click Me!');
        fn.load('fetchPage.html');
        fetchFunction();
         //alert("btnClickMee");
     };

      // Another Tab Item
      // Uncomment this bellow line to see list of items.
      //$("#ons-list-fetch").click(fetchFunction);
      // When clicked on List Item index may be pop up
      $("#myListElement").click(listClicked);
  } // eof page.matches('#helloworld-page

    // Another Page
    if (page.matches('#fetchPage2.html')) {
        page.querySelector('#divFtechHere').onclick = function() {
            console.log ("list Item Clicked!");
            alert('Now clicked');
     };
  } // eof page.matches('#fetchPage2.html')
}); 
// For Menu Icon
window.fn = {};

window.fn.open = function() {
  var menu = document.getElementById('menu');
  menu.open();
};

window.fn.load = function(page) {
  var content = document.getElementById('content');
  var menu = document.getElementById('menu');
  content.load(page)
    .then(menu.close.bind(menu));
}; // eof Menu Icon

function listClicked(){
    ons.notification.alert("You click on: ");
    alert("You click on: ");
}

function addFunction(){

                var user_name1 = $('#username').val();
                var user_age1  = $('#password').val();

                console.log("testFunc is invoked");
                console.log("user_name: " + user_name1 + " user_age: " + user_age1);
                $.post({
                    type: 'POST',
                    url: "add.php?user_name=" + user_name1 + "&user_age=" + user_age1,
                    timeout: 5000,
                    success:function(result){
                    console.log("Added: " + result);    
                    ons.notification.alert("Success: " + result);
                        //$("#div1").html(result);

                    console.log("Success");                         
                    },
                    error: function(err){
                    ons.notification.alert("Error: " + err.status + ", " + err.statusText);
                    console.log("Error: " + err);
//                  console.log(err.status);
//                  console.log(err.statusText);
//                  $("#div1").text(err.responseText);
                        }
                    });
            }

function fetchFunction(){
    //fn.load('fetchPage.html');
                console.log("fetchFunction is invoked");

                var header = "<ons-list-header>My Inset List</ons-list-header>";
                $.post({
                        type: 'POST',
                        url: "fetch.php",
                        success:function(result){
                        timeout: 5000,
                        $("#myListElement").html(header);
                        $("#myListElement").append(result);

//                  $('.center').onclick = function () {
//                  //listClicked1();
//                  alert(8);
//          };

                        //console.log("Fetched: " + result);    
                        //ons.notification.alert("Success: " + result);
                        //$("#div1").html(result);

                        console.log("Success");                         
                        },
                        error: function(err){
                        ons.notification.alert("Error: " + err.status + ", " + err.statusText);
                        console.log("Error: " + err);
//                      console.log(err.status);
//                      console.log(err.statusText);
                        //$("#div1").text(err.responseText);
                        }
                    });
            }
 }); 



//var login = function() {
//  var username = document.getElementById('username').value;
//  var password = document.getElementById('password').value;
//
//  if (username === 'asd' && password === 'asd') {
//    ons.notification.alert('Congratulations!');
//  }
//  else {
//    ons.notification.alert('Incorrect username or password.');
//  }
//};

最佳答案

哇!

我刚刚编辑了这个:

if (page.matches('#fetchPage.html')) {
page.querySelector('#divFtechHere').onclick = function() {
    console.log ("list Item Clicked!");
    alert('Now clicked');
 };
} // page.matches('#fetchPage.html')

至

if (event.target = "fetchPage.html") {
    $("#divFtechHere").click(function () {
        alert("Div Clicked");
    });
}

现在可以使用了;)

现在正在调用该方法，是的:D

关于javascript - 无法调用未获取 page.matches OnSenUi 的函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43088679/

25 4 0
文章推荐： javascript - KnockoutJS，绑定(bind) View
文章推荐： sas - 如何确定 PC 的 CPU 核心数？
文章推荐： delphi - 我想要一些有关在高分辨率屏幕上调整工具栏大小的指导
文章推荐： javascript - 如何使用 Javascript 阻止用户输入特定 key
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com