使用 JQM pagebeforeshow 获取点击链接 ID

Question

我的 JQM 索引页有 3 links

<div data-role="page" id="index" name="index">
<div data-role="header" data-position="inline" data-theme="b">
<a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
<h1></h1>
<a href="index.html" data-icon="user" data-iconpos="right" data-theme="d">Account</a>
</div>
<div data-role="main" class="ui-content">

<table data-role="table"class="ui-responsive" id="myTable">
<td><a href="#choose" id="1" class="add">Join Here</a></td>
<td><a href="#choose" id="2" class="add">Join Here</a></td>
<td><a href="#choose" id="3" class="add">Join Here</a></td>
</table>
</div>
</div>

点击Join Here我有另一个页面弹出对话框#choose，但是这个页面上的数据是由之前点击的link决定的。我想不出办法把那个 ID 传到这里。

    $(document).on('pagebeforeshow','#choose', function(){
        var id = //ID of clicked link
     });

Answer 1

看看这篇文章：https://jqmtricks.wordpress.com/2014/01/22/passing-parameters-between-pages-multi-page-model/

对于您的示例，将导航处理为 #choose on anchors 的点击处理程序而不是 href：

<table  id="myTable">
    <tr>
        <td><a href="#" id="1" class="add">Join Here</a></td>
        <td><a href="#" id="2" class="add">Join Here</a></td>
        <td><a href="#" id="3" class="add">Join Here</a></td>
    </tr>
</table>

$(document).on("pagecreate", "#index", function(){
    $(".add").on("click", function(){
        var id = this.id;        
        $.mobile.pageContainer.pagecontainer("change", "#choose", {theid: id});        
    });
});

点击时，您将获得被点击锚点的id，然后将其作为参数传递到pagecontainer change 方法中。要检索 id，请使用 pagebeforechange 事件读取数据选项：

$(document).on( "pagebeforechange" , function ( event, data ) {
    if ( data.toPage[0].id == "choose" ) {
        var id = data.options.theid;
        console.log(id);
    }
});

Here is a DEMO

使用 JQM pagebeforeshow 获取点击链接 ID

Get clicked Linked ID using JQM pagebeforeshow

jquery-mobile