Onclick event not working jquery

Question

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?

you dont need to bind it to page events. just remove `pagebeforeshow` binding. — Omar, Jul 03 '13 at 10:49

score 1 · Answer 1 · edited May 23 '17 at 12:05

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.

thanks for the answer. But i have an image which is circular and the top image is entirely coming in the bounds of the circular image. i want to fix the image in that way. since the top image is coming with in the bounds of circular image the `on('click', function())` method is not working. — Beginner, Jul 03 '13 at 11:33

Onclick event not working jquery

1 Answers1