jQuery Mobile page loads, but buttons doesn't works

Question

I've solved my last issue in this topic: jQuery on second click doesn't work - mobile

I have two pages, index.php and add.php. From index.php I call the page add.php this way:

$(document).on('pagebeforeshow', '#page-index', function(){     
    $('#openAdd').bind('click',function(){
        $.mobile.changePage('add.php');
    });
});

I have several buttons on the page add.php that work, but if I hit the button "openAdd" from the page Index which opens the page add, every single button on the page add stops working. I get no errors, no messages, nothing, simply it doesn't perform any action.

If I type in the browser the URL directly to mywebsite.com/add.php they work.

This is what I've tried so far without any success:

<a href="#page-clients"><input type="button" id="clients-btn" value="Clients" data-role="none"/></a>

$("clients-btn").on("click", function(){
    console.log("hit!!!!");
});

$(document).on('pagebeforeshow', '#page-add', function(){     
    $('#clients-btn').bind('click',function(){
        console.log("hit!!!!");
    });
});

user3065191 · Answer 1 · 2013-12-26T15:29:37.560

0

Solved.

All you have to do is, on the second page (in my case add.php), put the following:

$('#page-add').on("pageinit", function () {
    $('#clients-btn').one('click', function () { 
        console.log('button clicked!!');
    });
});

Edit: actually not working.

edited Dec 26 '13 at 15:29

answered Dec 26 '13 at 15:15

user3065191

145
3
17

`pagecreate` will call your js once, when page will be created, but `pageinit` will call your js every time when page will be called – Mujtaba Haider Dec 26 '13 at 15:24

Mujtaba Haider · Answer 2 · 2013-12-26T15:35:27.890

0

Wrap your whole code in pagecreate

$( document ).on( "pagecreate", "#page-add", function( event ) {
  $('#page-add').on("pageinit", function () {
    $('#clients-btn').bind('click',function(){
        console.log("hit!!!!");
    });
  });
});

And try adding code called at the end of page

edited Dec 26 '13 at 15:35

answered Dec 26 '13 at 15:17

Mujtaba Haider

1,650
2
19
29

please hold a second. I'm having problems..it seems that actually I didn't solved. – user3065191 Dec 26 '13 at 15:26
Nor my code above nor yours is working. If I type directly into the URL www.mywebsite.com/add.php the buttons work. If I come from index.php and change to add.php the buttons no longer work. – user3065191 Dec 26 '13 at 15:30
how you calling add.php from index.php? data-ajax=false ?? – Mujtaba Haider Dec 26 '13 at 15:33
I edited the code, now calling `pageinit` inside `pagecreate`, should work, otherwise you making any very basic error – Mujtaba Haider Dec 26 '13 at 15:36
Doesn't work either. My current code for changing the page (works) is: `$("#openAdd").on("click", function(){ $.mobile.changePage("add.php"); });` – user3065191 Dec 26 '13 at 15:47
this might help. I've tried to add a function onClick() inside the button. If I went directly to the URL add.php works perfectly, if I went first to index and after to add.php I get the error: `Uncaught ReferenceError: showME is not defined` `function showME(){ console.log("CLICKED!!!!"); }` `` – user3065191 Dec 26 '13 at 15:52
Solved. It seems that on "changePage" event, script weren't load (like functions etc..), instead of changePage, I used: location.href = 'add.php' (in both pages), and it's working. Thanks. – user3065191 Dec 26 '13 at 15:58

jQuery Mobile page loads, but buttons doesn't works

2 Answers2