OnClick works only works after reload, using jquerymobile

Question

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 OnClick 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 alert(); 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>
            </div>
        </div>

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

Here a are my different attempts:

$(function () {


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

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


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

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

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

$("a").bind("click", function (event, ui){
            dateElementClicked(this);
        });

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

Edit:

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 alert() 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) {
                dateElementClickedFirstTime(clickedAnchor);
            }
            else if (appointmentList[getDateElementNumber(clickedAnchor)]["RolledOut"] == true)
            {
                hideContent(getDateElementNumber(clickedAnchor));
            }
            else if (appointmentList[getDateElementNumber(clickedAnchor)]["RolledOut"] == false)
            {
                showContent(getDateElementNumber(clickedAnchor));
            }
            else
            {
                alert("Element not listed");
            }
        }

BTW: my script isin my html file.

I would suggest recreating the issue in a fiddle or pen. Also, can you show `dateElementClicked()` function? — hopkins-matt, Sep 18 '15 at 16:22

score 0 · Answer 1 · answered Sep 18 '15 at 16:26

0

Maybe try using the deviceready event instead of document ready. https://cordova.apache.org/docs/en/4.0.0/cordova_events_events.md.html

answered Sep 18 '15 at 16:26

craigo

141
1
10

I kicked out jquery and jquery mobile. So technically you answer was right! – LosKartoflos Sep 25 '15 at 10:22

score 0 · Answer 2 · answered Sep 19 '15 at 06:36

0

Try this

$(document).on('click', '#anchor0', function(event) {

});

or this

$(document).on('click', 'a', function(event) {

});

answered Sep 19 '15 at 06:36

Sunil

919
15
25

score 0 · Accepted Answer · answered Sep 24 '15 at 15:44

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() {

        }

    </script>

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);
    app.receivedEvent('deviceready');

},

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.

OnClick works only works after reload, using jquerymobile

3 Answers3

Linked