0

我有一个 jQuery mobile 和另一个系统的设置。在一个页面上，我需要显示一个 ajax 加载对话框，并根据单击的链接（使用 class ）将数据返回到主页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>
4

2 回答 2

0

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

带有 jquery 的 JavaScript：

$('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-29T12:34:25.220 回答
0

在某些情况下，当 dialog('close') 功能不起作用时，我使用以下说明返回或转到我的主屏幕：

window.history.back();

或者

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

home -> 是我的主页

祝你好运！！！

于 2013-05-29T11:35:18.297 回答