0

我有 2 张图片，它们都在同一个 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");
    });
});

我犯了什么错误？

4

1 回答 1

1

当使用 jQuery Mobile 点击事件时，应该始终使用委托事件绑定来完成：

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

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

工作jsFiddle示例：http: //jsfiddle.net/Gajotres/LDLmF/

还有另一种可能。如果您使用多个 HTML 页面并且这不是第一页。如果是这种情况，并且如果它的 javascript 在 HEAD 内，它将被丢弃并且不执行。在这篇文章中阅读更多关于它的信息，或者在这里找到它。

于 2013-07-03T10:31:55.163 回答