Question

我认为这是与JQM pagebeforechange and event source相同的问题，但那里没有确凿的答案。

有谁知道如何获取触发事件的对象？

$(document).bind("pagebeforechange", function ( event , data) {
    //event is triggered from an anchor tag... 
    //Is it possible to get reference to anchor here?
});

感谢。

富勒示例：

<div data-role="page" id="ANGRY">
<div data-role="header">
    Solo Questions</div>
<div data-role="content">
    <fieldset data-role="controlgroup">
        <legend>Since your last scheduled prompt, how <strong>angry</strong> have you felt?</legend>
        <input type="radio" name="ANGRY" value="1" id="ANGRY1" />
        <label for="ANGRY1">
            None</label>
        <input type="radio" name="ANGRY" value="2" id="ANGRY2" />
        <label for="ANGRY2">
            Some</label>
        <input type="radio" name="ANGRY" value="3" id="ANGRY3" />
        <label for="ANGRY3">
            A Lot</label>
    </fieldset>
</div>
<div class="ui-grid-a">
    <div class="ui-block-a">
        <a href="#HAPPY" data-role="button" data-icon="arrow-l" data-iconpos="left">prev</a></div>
    <div class="ui-block-b">
        <a href="#IRRITABL" data-role="button" data-icon="arrow-r" data-iconpos="right">next</a></div>
</div>
</div>

我希望能够确定触发pagebeforechange事件的内容 - “上一步”按钮或“下一步”按钮。这样做的目的是在移动到下一页之前执行验证，但不是在返回上一页时。

Answer 1

toPage是否适用于此？

http://jsfiddle.net/pK6GX/1/

JS

$(document).bind("pagebeforechange", function ( event , data) {
    console.log('To Page: '+data.toPage);
});

HTML

<div data-role="page" id="home">
    <p>Open up the console and Click the Info link</p>
    <ul>
        <li><a href="#info">Info</a></li>
    </ul>
</div>

<div data-role="page" id="info">
    <ul>
        <li><a href="#home">Home</a></li>
    </ul>
</div>

Answer 2

这不是我想要的优雅，但它适用于我的解决方案（我认为你的解决方案）。 jQuery在调用任何click事件（例如page）之前调用任何pagebeforechange个事件。我只是强迫我的锚元素将他们的ID附加到他们的data-role="page"容器。

首先：

$('a[href="#ce"]').on('click',function(){
    $(this).closest('div[data-role="page"]').attr('data-caller',$(this).attr('id'));
});

我现在正在使用data-caller来确定刚刚点击了哪个锚点。

下一步：

$(document).on('pagebeforechange',function(event,data){
    //makes sure that a valid link is actually clicked and ignores init
    if (data.toPage.toString().indexOf('#')>-1 && $(data.options.fromPage).attr('data-url')!==undefined){
            //Determines which page jqm is changing to
            if(data.toPage.split('#')[1]=='ce'){
                switch($('#'+_from).attr('data-caller')){
                    case 'ID_of_anchor_1':
                        //UNIQUE CODE FOR ANCHOR 1
                        break;
                    case 'ID_of_anchor_2':
                        //UNIQUE CODE FOR ANCHOR 2
                        break;
                }
            }
        }
    });

最后，根据您的新页面，您可能希望删除data-caller上的data-direction=“reverse”属性，以免意外再次调用。

在更改事件之前确定jQuery Mobile页面的调用者

2 个答案: