Question

我的JQM索引页面包含3个链接

<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>

单击“加入此处”的单击我有另一个页面，弹出的对话框是#choose，但此页面上的数据取决于之前单击的链接。我无法找到一种方法来获取该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/

对于您的示例，请在锚点的单击处理程序而不是href处理导航到#choose：

<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更改方法中的参数传递。要检索id，请使用pagebeforechange事件来读取数据选项：

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

这是 DEMO

使用JQM pagebeforeshow获取单击的链接ID

1 个答案: