LosKartoflos LosKartoflos - 2 years ago 309
HTML Question

OnClick works only works after reload, using jquerymobile

I know it's an often asked question, but no answer (till now) fits for me.

I wrote a mobile app with Cordova. I'm also testing apps in browser (Firefox). I'm using jQuery and jq mobile.

The problem is: my

events on work only after refresh, which isn't possible on mobile and even on pc not really an solution.

Update: I read about, that the ehader isn't loaded again in jQuery mobile. So I treid it as described in thsi solution: page loaded differently with jQuery-mobile transition

didn't work.

And with
you see, that the script runs once but before the site is totally build.

My html:

<div data-role="main" class="ui-content" id="container" >
<div id="container0">
<a data-role="button" id="anchor0" >Neuen Termin Hinzuf├╝gen</a>

originally the
had an
<a onClick>="doStuff()"

Here a are my different attempts:

$(function () {

// Assign the click handler on DOM-ready
$('a').on('click', function () {

$(document).ready($(function () {

// Assign the click handler on DOM-ready
$('a').on('click', function () {

$("#anchor0").live("click", dateElementClicked($("#anchor0")));

$("a").click( dateElementClicked(this));

$("a").bind("click", function (event, ui){

They all work only after an refresh. or the first one runs the function instant and interupts everything because "this" is undefined.


I even tried it with button and inpute type button and made extra js file. but my javascript only runs after an refresh... Putted an console log and alert in the script. So the whole script is stuck somehow

The dateelement clicked function (I cleared this too for testing and just put an
in it)

Here is the git link to the project: https://github.com/LosKartoflos/Apoll.git

function dateElementClicked(clickedAnchor) {
//anchor is clicked the first time(the id number equals numberOfAppointments)
if (clickedAnchor.id.slice(-1) == numberOfAppointments) {
else if (appointmentList[getDateElementNumber(clickedAnchor)]["RolledOut"] == true)
else if (appointmentList[getDateElementNumber(clickedAnchor)]["RolledOut"] == false)
alert("Element not listed");

BTW: my script isin my html file.

Answer Source

okay the Problem is, that Cordova is messing around with normal build/loading oder. to trigger functions, after the side is loaded.

The Cordova Documentary recommends this two solutions:

Put this in your header and bind your events in the onload or dofirst. An do everything you want to be have done, after page is ready, in the do first:

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

        // Wait for device API libraries to load
        //add all Events (click Events)
        function onLoad() {
            document.addEventListener("deviceready", doFirst(), false);
            document.getElementById("anchor").addEventListener("click", clickedFunction, false);

        // device APIs are available
        function onDeviceReady() {


        //things to put up first
        function doFirst() {



or put it in the onDeviceReady function, in the auto created index.js .

 // deviceready Event Handler
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
    document.getElementById("anchor0").addEventListener("click", clicked, false);


Here the documentary: https://cordova.apache.org/docs/en/4.0.0/cordova_events_events.md.html

And i kicked out jquery and jquery mobile. Jquery was messing around with document ready and jquery mobile prevents the head from beeing loaded again.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download