0

2 つの画像があり、両方とも同じ div にあります。z-index1 つの画像の を -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/

また、もう1つの可能性があります。複数の HTML ページを使用していて、これが最初のページではない場合。この場合、その JavaScript が HEAD 内にある場合は破棄され、実行されません。詳細については、この記事を参照するか、こちらを参照してください。

于 2013-07-03T10:31:55.163 に答える