Question

我有两张图片，他们都在同一个div中。我已将一个图像的z-index设置为-1，并使用margin-bottom将其向下移动。

这是我的代码：

<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 -->

在我的js文件中我有：

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

我犯的错是什么？

Answer 1

使用jQuery Mobile时，应始终使用委派的事件绑定完成点击事件：

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

这称为委托事件绑定。它不关心元素是否已经存在于DOM中。它的工作原理是因为事件绑定到像文档对象这样的静态元素，只有当它存在于DOM中时才会传播到正确的元素。

使用 jsFiddle 示例：http://jsfiddle.net/Gajotres/LDLmF/

还有另外一种可能性。如果您使用多个HTML页面，这不是第一页。如果是这种情况，如果它的javascript在HEAD中，它将被丢弃而不执行。请在 ARTICLE 中详细了解相关信息，或者找到 HERE 。

Onclick事件不起作用jquery

1 个答案: