问题描述
已附加项目这里
我已经浪费了整个生命(实际上是一个星期)解决了这个问题.我正处于混合应用程序开发的起步阶段,这件事伤害了我.我在 Cordova 中工作,并使用 OnSen UI 作为开发应用程序的框架.我的JavaScrip和jQuery一切都很好,但是我无法从onClick
方法调用函数.
I have wasted my whole life (actually one week) figuring out this problem. I am at the beginning stage of Hybrid App Development and this thing is hurting me.I am working in Cordova and using OnSen UI as my framwork for developing an App.My JavaScrip and jQuery everything is fine but I am unable to call functions from onClick
method.
我想要的是在里面:
<ons-template id="fetchPage.html">
,我有div
和id="divFtechHere"
我想找到它并致电:
<ons-template id="fetchPage.html">
,I have div
with id="divFtechHere"
I want to find it and want to call:
if (page.matches('#fetchPage.html')) {
page.querySelector('#divFtechHere').onclick = function() {
console.log ("list Item Clicked!");
alert('Now clicked');
};
} // page.matches('#fetchPage.html')
但这不起作用.
最终,我想要实现的是:当我想单击#myListElement
(具有项目列表)时,它会返回ID
以便我可以从Web服务器获取更多信息.请帮助我解决此问题.如果您能帮助修复整个document.addEventListener('init', function (event)
,我会很高兴.我想我在那里也做错了.谢谢你.
Ultimately,What I want is to achieve is:When I want to click on #myListElement
(which is having list of items) and it return me with ID
so that I can fetch more info from webserver.Please help me fix this issue. I will be glad if you help fixing my whole document.addEventListener('init', function (event)
I think I am doing something wrong there as well.Thank You.
这是我的完整代码:
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
The method now is calling, Yep :D
这篇关于无法调用函数未获取page.matches OnSenUi的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!