2

I am having problems with my jQuery Mobile button and I don't know how to solve it.

I am trying to bind a click event to it. During the click event my current page should change to an another page.

Event is bound on this buton :

<a id="test" data-role="button">Test</a>

using this javascript code:

$(document).ready(function() {
    $('#test').on('click', function() {
        alert('Click!')
    });
});

This code used to work in the beginning but as my site grew larger it just stopped working all together.

One more question, as this is my first question here how can make it better? From my past experience surfing through this site I found a lot of unanswered questions.

Improve this question
3
  • This is hard to answer, as the code seems to be correct and you say for yourself that this worked in the past. Two possible reasons come to my mind, it may be the missing semicolon behind alert or you may have another element with the same id. Commented Mar 23, 2013 at 10:51
  • Your code is perfectly fine, so there few possibilities, either Duplicate ID problem or there might be error in other JS Code. Please check console you will may able to find your error. Commented Mar 23, 2013 at 11:17
  • You don't need to bind it to .ready(). It will work without it. Commented Mar 23, 2013 at 17:13

2 Answers 2

Reset to default
2

This answer will be written from the perspective of jQuery Mobile, but most of it can be also used in other groups.

Disclamer

This is a post from my personal blog.

Presence

First and most important, don't post your question and disappear. Stick at least half an hour or even full hour and wait for comments (to your question) or even better answers. Usually, SO members will have more questions and you should answer them as soon as possible. Don't look at this like it is a chore, you have a question and you should work for a correct answer.

In case no one is responding to your question, return few times during the day.

Code examples

Second, you need to provide a code example. More is better but don't overdone it. In case you are putting large code examples try to comment everything. For example : "This is my index page, my problem occurred here..... ". And because this is a group dedicated to jQuery Mobile (secondary to jQuery) take care to also put your js code, let it have a bigger priority over a HTML code.

For example, this is a well formatted question: how to load an another html file on a button click in jquery mobile

Everything we need is here:

This js code example covers whole page and we can use it to create a working example. It is much better then to just point you to the right direction.

<script type="text/javascript">
    $(document).ready(function() {
        var userName;
        var userPassword;

        $("#submitBtn").click(function() {
            //alert("HI");      
            userName = $("#UserName").val();
            userPassword = $("#Password").val();

            if ((!UserName)|| (!userPassword)) {
                alert("Enter the Details");
            }
            else {
                if ((userName !="alpha") ||(userPassword !="beta")) {
                    alert('Enter correct username and password');
                }
                else {
                    //here i want to load my selectOption.html file ?
                }             
            }                                  
        });                          
    });
</script>

Like in top example, this is enough for us to see the problem and to create you a working example.

<body>
    <div data-role="page" id="home">        
        <div data-role="header">            
            <h1>Enter Credential</h1>                      
        </div>

        <div data-role="content">
            <label for="UserName">User Name</label>
            <input type="text" name="UserName" id="UserName" value="" style="width:220px;"  />

            <label for="Password">Password</label>
            <input type="password" name="Password" id="Password" value="" style="width:220px;"  />

            <div id="submitBtn" data-role="button">Submit</div>
        </div> 
    </div>
</body>

Live code examples

Third, if you want to go a little bit further, you can create a jsFiddle example from your code. jsFiddle is an excellent online tool and you will find that a lot of SO members use it to give an answer or ask a question.

Official page: http://jsfiddle.net/

Usually problem can be recreated in a smaller HTML and JS example, so use it to create a working live example. You would be surprised how many time this will result in successful answer. For example, this is a template I use to help other SO members, it has everything I need to give a fast and correct answer and a working example: http://jsfiddle.net/Gajotres/yWTG2/

One other major note, your code (HTML or js) must be well formatted. In case you have a large code example you can use this tool to automatically make your code look pretty: http://jsbeautifier.org/

You should use it constantly and wisely. Don't forget you can use it for your own code.

Additional info

Don't forget to tell us what framework versions have you used inside your project. This is very important. Usually only thing needed is a jQuery and jQuery Mobile versions.,In case you are using additional frameworks you should put their versions also.

If you have time and will take a look at my additional answers/articles regarding jQuery Mobile. From my experience 50 % of your jQuery Mobile questions can be solved here:

Final thoughts

Last important thing. Be HUMBLE, no one likes wise guys. It doesn't matter how smart or good developer you are. You are here looking for a help, so help us help you.

EDIT :

To answer your question, your problem is in a document ready line. It can not be used with jQuery Mobile, because it will usually trigger before jQuery Mobile page is initialized. Your button can not exist inside the DOM if page is not initialized.

To solve it, you should use proper jQuery Mobile page event, like this:

$(document).on('pagebeforeshow', '#index', function(){      

});

Where $index is an id of your page.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

-1 
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Slider - Default functionality</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script>

function fun()
{

var some = $("#some").val();

    if (some.match("3")) {
       alert("Hello");
    }
}

</script>
</head>
<body>
<select id="some">
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
<button  id="btn" onclick='fun()' >Show</button>
</body>
</html>

Hi Friend, This may Help you. Thanks :)

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.