jQuery手機重新加載頁面。行爲不預期

我有一個設置與jQuery手機和其他系統。在一個頁面上，我需要顯示一個ajax加載的對話框，並根據點擊鏈接返回數據到主頁面（類link）。jQuery手機重新加載頁面。行爲不預期

$(document).live("pageinit", function(event) { 
    $(document).on("click", ".link", function (event) { 
       putDataToTheMainPage(); 

       $('.ui-dialog').dialog('close'); 

       event.preventDefault(); 
       event.stopPropagation(); 
       return false; 
      }); 
});

但是該插件沒有關閉對話框，它的行爲與點擊普通鏈接的方式相同。我知道該函數在click事件觸發時執行，但其他處理程序（jQuery移動提供的那些）的執行仍在繼續。這裏發生了什麼？

無論這個處理函數中的鏈接，也不是jQuery Mobile的自動添加到正確的時候包含鏈接到對話框中的頁面使用jQuery Mobile的BUT 加載頭工作使用加載時不會按預期方式工作頁面的關閉按鈕它的URL或使用瀏覽器重新加載。

更多上下文：該對話框使用正常的對話鏈接加載。

<a href="link.html" class="class" data-rel="dialog" data-transition="pop"><img src="button.gif"></a>

我在繪製對話框的頁面中使用以下結構。

<html> 
    <head>...</head> 
    <body> 
     <div data-role="page" class="content" role="main"> 
      <div data-role="header" data-backbtn="false" role="banner"> 
        <div class="myheaderdiv"></div> 
      </div> 
      <div data-role="content"> 
        <ul> 
         <li>link, text and images</li> 
         <li>link, text and images</li> 
         ... 
        </ul> 
      </div> 
     </div> 
    </body> 
</html>

來源

2013-05-29 Pedro Montoto García

你能告訴我們一些你的HTML，或至少爲HTML你的對話？就這樣我們可以得到你的問題的背景。 – Gajotres

'event.stopPropagation'或'event.preventDefault'應該是您在事件處理程序中首先執行的操作。你也可以嘗試'event.stopImmediatePropagation' – TecHunter

在某些情況下，當對話框（「關閉」）功能doesn't工作，我使用下面的說明回去還是去我家的屏幕：

window.history.back();

或

$.mobile.changePage($("#home"));

首頁 - >是我的主網頁

祝你好運！

來源

2013-05-29 11:35:18

如果你想阻止事件處理程序的開火，那麼你必須在正確的時間停止它們。我在下面做了一個例子，但不幸的是它不適用於IE 8及更低版本。

http://jsfiddle.net/CXMcN/4/

HTML：

<a class="link">you can stop me from bubbling</a> 
<br /> 
<br /> 
<a>but you can't stop me</a>

JavaScript的使用jQuery：

$('a').on('click' , function(event) { 

    alert('hello world'); 

}); 

//reference for last target link element that had an mousedown event 
var mousedownEl; 

//set this flag to be true if we want to 
//stop click event from bubbling down from body 
var mouseClickOnLink = false; 

$('a.link').on('mousedown', function() { 

    mousedownEl = this;  

}); 

$('a.link').on('mouseup', function() { 

    //if the element that last triggered mouse down is this 
    //then a click event will occur after the mouseup 
    //event and we set the flag to cancel the click event 
    if(mousedownEl == this) {    
     mouseClickOnLink = true;  
    } 

}); 


//add click event listener for body in the capture phase 
// http://www.quirksmode.org/js/events_order.html 
// (jquery does not support event capture phase argument 
// so you might need to add some browser compability code 
// for adding the event handler correctly in different browsers) 
$('body')[0].addEventListener(
    'click', 
    function() {     

     //if mouse click flag is set to true 
     //prevent event from bubbling 
     if(mouseClickOnLink) 
     {    

      //stop event from bubbling further down in the dom 
      //and firing their event handlers 
      event.stopPropagation();    

      //reset flag 
      mouseClickOnLink = false; 

     } 

    }, 
    true); //add event handler at capture phase

來源

2013-05-29 12:34:25

jQuery手機重新加載頁面。行爲不預期

回答

相關問題