CODEWITHSUNDEEP
javascriptjqueryhtmlcordova
user481610
user481610

Reputation: 3270

.click() not working when using jQuery

I have a normal js script which has been working since the start of my project. But now for some reason when I click on buttons nothing works at all, no response from the clicking event(note this used to work) and nothing displays in the console log stating if there is an error of some sort... the script just doesn't respond...

Here is the HTML:

<script type="text/javascript"  src="js/myscript.js"></script>

<form>
   <input type="text" name="signinemail" id="signinemail" placeholder="Enter Email">
   <input type="password" name="signinpassword" id="signinpassword" placeholder="Enter Password">
   <input type="submit" id ="siginsubmit" name="siginsubmit" value="Sign In">
</form>

Here is my javascript: 

$(document).on('pageinit',"#sellbookpage",
    function()
    {
        $("#siginsubmit").click
            (
                function()
                {
                   alert("hello");
                }   
            );
    }
);

Note I am making use of jQuery Mobile

Upvotes: 0

Views: 133

Answers (4)

user481610
user481610

Reputation: 3270

The winning answer to my problem was nothing to do with any of the above posts mentioned above! What was causing the problem was I was using the jQuery mobile, jQuery and Twitter Bootstrap. As soon as I commented out the link to the bootstrap css everything started to work as it used to. Thus there must be a conflict between Twitters Bootstrap and either jQuery or jQuery Mobile.

Upvotes: 1

pete
pete

Reputation: 25081

From http://api.jquery.com/on/#on-events-selector-data-handlereventObject:

When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.

siginsubmit is an input (which cannot contain descendant elements let alone descendant elements with id="sellbookpage") so the selector string is not matching anything and the click event is never reaching the siginsubmit input.

Change it to this:

$(document).on('pageinit', function () {
    $('#siginsubmit').click(function (e) {
        alert('hello');
        e.preventDefault();
        return false;
    });
});

Working fiddle: http://jsfiddle.net/VG3Eg/

Upvotes: 0

Liam Allan
Liam Allan

Reputation: 1115

have u tried using live() 

$("#sellbookpage").live('pageinit', function() {
            $("#siginsubmit").click(function(){
                 alert("hello");
            });
});

Upvotes: 0

mzedeler
mzedeler

Reputation: 4369

The pageinit event is only available if you use jQuery Mobile. Are you still using that? Otherwise you should use $(document).ready( ... ).

Upvotes: 1

Related Questions