0

我有一个小 javascript 函数，我试图在通过 JQM ajax 加载页面加载后运行该函数。现在我看到其他帖子讨论这个问题，但无法解决我的问题。当我的索引加载时，我最初加载了脚本，认为它会在 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>标签加载它，我知道这是问题所在，我只是不确定如何解决它。

我正在使用 Jquery Mobile 1.3 和 Jquery 1.9.1

4

2 回答 2

3

如果要在加载 jQuery Mobile 页面后加载要执行的内容，则需要使用正确的 jQuery Mobile 页面事件，例如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 回答