This is a migrated thread and some comments may be shown as answers.

jQuery code not loaded when navigating to html file?

3 Answers 141 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

James asked on 03 May 2012, 05:21 AM

I have a very straightforward setup at the moment.
index.html has 2 links. Using jQuery I handle the .click event of the links and call app.navigate to load either "test.html" or "about.html". They both load correctly as far as static HTML goes, however anything inside of a jQuery block does not work.
For example on about.html I have a link with id="test". with the jQuery of :

$("#test").click(function(e){

alert('inside click');

});

it does not show an Alert. If I move the Alert as regular JS code it works or if I move the jQuery code and "test" link to the main view (index.html) it works.

So it seems pretty obvious that any jQuery code (or at least events) not in the index.html and referencing HTML elements that exist in the DOM at the moment won't work correctly.

Is this a known bug? It seems like an incredibly large oversight.

3 Answers, 1 is accepted

answered on 03 May 2012, 12:57 PM

Hello,

The reason for the handler not working is that when the script is evaluated, the remote page is not yet initialized (and outside of the DOM).

The recommended way to achieve this is to define a view init event handler function in the remote view, and define your code there. You can take a look at the source code of our mobile demos (this one, for example), for an example.

On a side notice, the click event performs ~300ms delay on mobile devices, significantly decreasing the perceived application performance. I would like to recommend taking a look at our widget (button/listview) events instead.

Kind regards,
Petyo
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 04 May 2012, 03:29 AM

I tried using an init like you said but it does not seem to work. Here is the full source of the page being navigated to via "app.navigate"

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

<meta charset="utf-8">

<link rel="stylesheet" href="styles/kendo.mobile.all.min.css" type="text/css" />

<script type="text/javascript" charset="utf-8" src="cordova-1.7.0rc1.js"></script>

<script type="text/javascript" charset="utf-8" src="js/jquery.min.js"></script>

<script type="text/javascript" charset="utf-8" src="js/kendo.mobile.min.js"></script>

<script type="text/javascript" charset="utf-8">

function onBodyLoad()

{

document.addEventListener("deviceready", onDeviceReady, false);

}

/* When this function is called, Cordova has been initialized and is ready to roll */

/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.

see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html

for more details -jm */

function onDeviceReady()

{

// do your thing!

}

var prepareThings = function() {

console.log('preparing things');

$("#home").click(function(e){

console.log('home clicked');

e.preventDefault();

app.navigate("index.html");

});

$("#about").click(function(e){

console.log('about clicked');

e.preventDefault();

app.navigate("about.html");

});

}

</script>

</head>

<body onload="onBodyLoad()">

<div data-role="view" data-layout="app" data-title="test" id="test" data-init="prepareThings">

This is a test page.<br />

<a href="#" id="home">Home</a>

<br />

<a href="#" id="about">About</a>

</div>

</body>

</html>

None of the "console.log" instances are hit. Which means that "prepareThings" is not hit. The page loads and looks fine. If I add a script tag that just does an alert, it works, but prepareThings isn't called at all.

Accepted