jQuery Mobile button is not firing without refresh

Question

I am using jQuery mobile in my project and when I log on to system, then go to change password page, the change action is not firing (no action). But, when I refresh the page, it is firing. Briefly, the button on the page is not working when it is redirected from another page except itself. I have imported .css and .js files correctly in master page. (Generic Handler returns correct values and it is working)

head content:

<script type="text/javascript">
        $(document).ready(function () {
            $("#changePasswordBtn").click(function () {           
                $.ajax({
                    type: "POST",
                    url: "ChangePasswordHandler.ashx",
                    data: "oldPassword=" + $("#oldPassword").val() + "&newPassword=" + $("#newPassword").val() + "&reNewPassword=" + $("#reNewPassword").val(),
                    success: function (msg) {
                        if (msg == 0) $("#popupText").text("success");
                        else if (msg == 1) $("#popupText").text("wrong pass");
                        else if (msg == 2) $("#popupText").text("match error");
                        else if (msg == 3) $("#popupText").text("fill boxes");
                        else $("#popupText").text("error");                      
                    }
                });
            })
        });
    </script>

body content:

<input type="button" id="changePasswordBtn" value="Change Password" data-inline="true" />

`.ready` shouldn't be used with jQuey Mobile. Are you using multi-file template? Or single file? — Omar, Jul 12 '13 at 22:45
if you are meaning about head and body contents, they are in the same .aspx file. — JoshuaJeanThree, Jul 12 '13 at 22:50
Ok, first of all, remove `ready` and change `.click` with `$(document).on('click', '#id', function()` and try again. — Omar, Jul 12 '13 at 23:00
Have you attached the click event to `pageinit` instead of ready? — Omar, Jul 12 '13 at 23:26
I had removed ready and I did not used pageinit in "on()". I did as I mentioned the code in my comment. Do I have to use something like: **$( "#aboutPage" ).on( "pageinit", function( event ) { alert( "This page was just enhanced by jQuery Mobile!" ); });** I did not exactly understand. — JoshuaJeanThree, Jul 12 '13 at 23:34
also alert does not fire without refresh. When I refresh the redirected page, and then click, it is firing. — JoshuaJeanThree, Jul 12 '13 at 23:40

score 0 · Answer 1 · answered Jul 12 '13 at 22:30

0

I have seen a similar problem in my project. Make sure that you are using different ids for buttons.

If the ids are same then the click event is not attached to the right button.

answered Jul 12 '13 at 22:30

Anup

627
5
19

I am sure that the IDs are different for each button. – JoshuaJeanThree Jul 12 '13 at 22:34

score 0 · Answer 2 · answered Dec 06 '13 at 11:25

I got a workaround for this issue by changing the way I load my pages. I put target="_self" into the href element so it don't load using the # system - this way the javascript loads with the initial page load while navigating from one page to a nother.

I will put the below link on my index.html page that will navigate to my signup.html page.

<a href="signup.html" target="_self" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="a" data-inline="true">Signup</a>

NOTE: You will lose the 'fancy' jQuery Mobile page transition feature

jQuery Mobile button is not firing without refresh

2 Answers2