2013-03-26 180 views
0

我有一個小的JavaScript函數,我試圖讓頁面通過JQM ajax加載加載後運行。現在我已經看到其他文章討論這個問題,但一直沒能解決我的問題。當我的索引加載時,我最初加載了腳本,認爲它會在DOM更改後保留在頭部,但它仍然沒有任何作用。這是劇本。
ajax加載後運行javascript

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

回答

3

如果要加載的東西后,jQuery Mobile的頁面加載,你需要使用適當的jQuery Mobile的頁面事件,像pageshow執行。

下面是一個例子:

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

而這裏的工作的例子:http://jsfiddle.net/Gajotres/tuJEm/

你應該把你的代碼pageshow事件中。 #index應該是您網頁的ID。

如果您想了解更多關於jQuery Mobile的頁面事件來看看這個ARTICLE,或者發現它HERE

1

bind不推薦使用。改爲使用on

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

在jQuery 1.7中,。對()方法是用於事件處理程序安裝到一個文件的優選方法。對於早期版本,.bind()方法用於將事件處理程序直接附加到元素。處理程序被附加到jQuery對象中當前選定的元素上,所以這些元素必須存在於對.bind()的調用發生時。有關更靈活的事件綁定,請參閱.on()或.delegate()中的事件委託的討論。