CODEWITHSUNDEEP
javascriptjqueryjquery-mobilejquery-mobile-pageshow
mhartington
mhartington

Reputation: 7025

running javascript after ajax load

I have a little javascript function that I'm trying to get to run after a page gets loaded via JQM ajax load. Now I've seen other posts discussing this, but have not been able to resolve my problem. I have the script loaded initially when my index loads thinking that it will stay in the head after the DOM changes but it still does nothing. Heres the script.

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

I'm loading it using standard <script> tags which I know is the problem, I'm just not sure how resolve it.

I'm using Jquery Mobile 1.3 and Jquery 1.9.1

Upvotes: 0

Views: 2016

Answers (2)

Gajotres
Gajotres

Reputation: 57309

If you want to load something to be executed after jQuery Mobile page is loaded you need to use proper jQuery Mobile page event, like pageshow.

Here's an example: 

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

And here's a working example: http://jsfiddle.net/Gajotres/tuJEm/

You should put your code inside a pageshow event. #index should be an id of your page.

If you want to find out more about jQuery Mobile page events take a look at this ARTICLE, or find it HERE.

Upvotes: 3

000
000

Reputation: 27247

bind is not recommended. Use on instead.

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

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. For earlier versions, the .bind() method is used for attaching an event handler directly to elements. Handlers are attached to the currently selected elements in the jQuery object, so those elements must exist at the point the call to .bind() occurs. For more flexible event binding, see the discussion of event delegation in .on() or .delegate()

Upvotes: 1

Related Questions