CODEWITHSUNDEEP
jqueryjquery-mobile
Beginner
Beginner

Reputation: 1424

Onclick event not working jquery

I have 2 images and they're both in the same div. I've set the z-index of one image to -1 and am moving it down using margin-bottom.

This is my code:

<div data-role="page" id="Mycom" class="background">
    <div data-role="header" class="header" data-position="fixed" data-tap-toggle="false"></div>
    <div data-role="content">
        <center>
                <h2>Headlines</></h2>

            <div>   <a href="#" id="indrotate"><img src="Image/right.png" style="width:30%;z-index:-1;margin-bottom:-30% !important;margin-left:70% !important;" /></a>

                <img src="SlicedImages/bground2.png" id="indimage" style="height:auto; max-height:80%; width:auto; max-width:90%;" />
            </div>
        </center>
        <center>    <a href="#" data-role="none" data-inline="true" data-transition="none"><img src="Image/Next.png" width="200px" height ="10%"></a>

        </center>
    </div>
</div>
<!-- ind Page end -->

and in my js file I have:

$(document).on('pagebeforeshow','#Mycom',function(e,data){  
    $('#indrotate').on('click',function(){
                alert("indrotate");
    });
});

What's the mistake I am making?

Upvotes: 0

Views: 100

Answers (1)

Gajotres
Gajotres

Reputation: 57309

When working with jQuery Mobile click events should always been done with delegated event binding:

$(document).on('click','#indrotate',function(){
            alert("indrotate");
});

This is called a delegated event binding. It doesn't care if element already exist inside a DOM or not. It works because event is binded to a static element like document object and it will be propagated to correct element only when it exists inside a DOM.

Working jsFiddle example: http://jsfiddle.net/Gajotres/LDLmF/

There's also one other possibility. If you are using several HTML pages and this is not a first page. IF this is the case and if its javascript is inside a HEAD it will be discarded and not executed. Read more about it in this ARTICLE, or find it HERE.

Upvotes: 1

Related Questions