0

JQMajaxロードを介してページがロードされた後に実行しようとしている小さなjavascript関数があります。今、私はこれについて議論している他の投稿を見ましたが、私の問題を解決することができませんでした。DOMが変更された後もスクリプトが先頭にとどまると考えてインデックスが読み込まれるときに、スクリプトを最初に読み込んでいますが、それでも何もしません。これがスクリプトです。

$(function(){
    var $product = $('#product'),
        $imgs = $product.find(".child"),
        imageTotal = $imgs.length - 1,
        clicked = false,
        widthStep = 20,
        currPos,
        currImg = 0,
        lastImg = 0;
    $imgs.bind('mousedown', function (e) {
        e.preventDefault(); // prevent dragging images
    })
        .filter(':gt(0)').addClass('notseen');

    $product.bind('mousedown touchstart', function (e) {
        if (e.type == "touchstart") {
            currPos = window.event.touches[0].pageX;
        } else {
            currPos = e.pageX;
        }
        clicked = true;

    });
    $(this)
        .bind('mouseup touchend', function () {
        clicked = false;
    })
        .bind('mousemove touchmove', function (e) {
        if (clicked) {
            var pageX;
            if (e.type == "touchmove") {
                pageX = window.event.targetTouches[0].pageX;
            } else {
                pageX = e.pageX;
            }
            widthStep = 20;
            if (Math.abs(currPos - pageX) >= widthStep) {
                if (currPos - pageX >= widthStep) {
                    currImg++;
                   if (currImg > imageTotal) {
                     currImg = 0;}
                } else {
                    currImg--;
                    if (currImg < 1) {
                        currImg = imageTotal;
                    }
                }
                currPos = pageX;
                $imgs.eq(lastImg).addClass('notseen');
                $imgs.eq(currImg).removeClass('notseen');
                lastImg = currImg;
                // $obj.html('<img src="' + aImages[options.currImg] + '" />');
            }
        }
    });
});

document.addEventListener('touchmove', function(e) { e.preventDefault(); }, false);// JavaScript Document

問題があることがわかっている標準<script>タグを使用してロードしていますが、どのように解決するかわかりません。

JqueryMobile1.3とJquery1.9.1を使用しています

4

2 に答える 2

3

jQuery Mobileページがロードされた後に実行されるものをロードする場合は、のような適切なjQueryMobileページイベントを使用する必要がありますpageshow。

次に例を示します。

$(document).on('pageshow', '#index', function(){       
    alert('Page loaded');
});

そして、これが実際の例です：http: //jsfiddle.net/Gajotres/tuJEm/

コードをpageshowイベント内に配置する必要があります。#indexページのIDである必要があります。

jQuery Mobileページのイベントについて詳しく知りたい場合は、この記事を参照するか、ここで見つけてください。

于 2013-03-26T16:13:22.420 に答える
1

bind推奨されません。on代わりに使用してください。

http://api.jquery.com/bind/

jQuery 1.7以降、.on（）メソッドは、イベントハンドラーをドキュメントにアタッチするための推奨されるメソッドです。以前のバージョンでは、.bind（）メソッドを使用して、イベントハンドラーを要素に直接アタッチしていました。ハンドラーはjQueryオブジェクトで現在選択されている要素にアタッチされているため、これらの要素は.bind（）の呼び出しが発生した時点で存在している必要があります。より柔軟なイベントバインディングについては、.on（）または.delegate（）のイベント委任の説明を参照してください。

于 2013-03-26T16:17:19.763 に答える