Question

我有一个jQuery mobile和另一个系统的设置。在一个页面上，我需要显示一个加载了ajax的对话框，并根据点击的链接（使用类link）将数据返回到主页面。

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

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

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

但插件不会关闭对话框，其行为与单击普通链接的行为相同。我知道函数在click事件触发时执行，但其他处理程序（jQuery mobile提供的处理程序）的执行仍在继续。这里发生了什么？

当使用jquery mobile加载包含对话框链接的页面时，链接的处理函数和jquery mobile自动添加到标题的关闭按钮都没有正常工作但页面在使用加载时按预期工作它的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>

Answer 1

在某些情况下，当对话框（“关闭”）功能不起作用时，我会按照以下说明返回或转到我的主屏幕：

window.history.back();

或

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

主页 - ＆gt;是我的主页

祝你好运!!!

Answer 2

如果要阻止事件处理程序触发，则必须在正确的时间停止它们。我在下面做了一个例子，但不幸的是它在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

jQuery mobile重新加载页面。不期望的行为

2 个答案: