Question

我在listview项目上附加了一个click事件，该事件将提供给一个对话框。当我关闭对话框并尝试单击另一个项目时，单击事件不会再次发生。我有什么或更好的方式有什么问题吗？

        var chapterId;

        $(document).on('click', '.listview', function (e) {
            var source = $(e.target).closest('li');
            var id = source.attr('data-chapter');
            if (id) chapterId = id;
            else chapterId = null;
        });

        $(document).on('pageinit', '#mydialog', function (e) {
            if (chapterId) {
                //DO SOMETHING WITH ID LIKE GET FROM DATABASE
            }
        });

这就是我的listview的样子：

<ul data-role="listview" data-inset="true" class="listview">
    <li data-chapter="1"><a href="dialog.html" data-rel="dialog">
        <h2>Chapter 1</h2>
        <p>Some text</p>
    </a></li>
    <li data-chapter="2"><a href="dialog.html" data-rel="dialog">
        <h2>Chapter 2</h2>
        <p>Some text</p>
    </a></li>
    <li data-chapter="3"><a href="dialog.html" data-rel="dialog">
        <h2>Chapter 3</h2>
        <p>Some text</p>
    </a></li>
</ul>

第一次单击工作并在对话框pageinit事件中传递正确的Id，但关闭对话框并单击另一个不会触发单击（我也尝试了vclick但结果相同）。任何帮助将不胜感激！

Answer 1

不要在页面之间使用数据传输的全局变量。使用DOM元素的data属性。考虑我有这样的列表视图：

<ul data-role="listview" id="songlist" data-theme="c" data-divider-theme="a" data-inset="true">
  <li data-role="list-divider" role="heading">Song List</li>
  <li data-chapter="1"><a href="#dialogPage">Sweet Child 'O Mine</a></li>
  <li data-chapter="2"><a href="#dialogPage">Summer of '69</a></li>
  <li data-chapter="3"><a href="#dialogPage">Smoke in the Water</a></li>
  <li data-chapter="4"><a href="#dialogPage">Enter Sandman</a></li>
  <li data-chapter="5"><a href="#dialogPage">I thought I've seen everythin</a></li>

我在身份#mypage1的网页中有此内容。该页面的pageinit功能将包含您的click功能。变化：

不要将点击绑定到ul。将其绑定到a标记。
在获取章节ID

e.preventDefault()

将章节ID存储在data

#dialogPage

使用changePage重定向。

以下是代码：

$(document).on("pageinit", "#mypage", function () {
    $(this).on("click", "#songlist a", function (e) {
        //prevent dialog transition 
        e.preventDefault();
        //get the data-chapter
        var source = $(this).closest("li").attr("data-chapter");
        //set that in #dialogPage's data for later use
        $("#dialogPage").data("chapter", source);
        //redirect to dialog
        $.mobile.changePage(this.href, {
            role: "dialog"
        });
    });
});

对于对话框，我有一个这样的标记：

<div data-role="page" id="dialogPage">
    <div data-role="header">
         <h2>Dialog</h2>

    </div>
    <div data-role="content">
        <p></p>
    </div>
</div>

对于对话框，进行了更改：

不要使用pageinit。该事件只发生一次，请使用pageshow或pagebeforeshow，这会在您每次到达对话框时发生。
从data的{{1}}获取章节的值：
```
#dialogPage
```

以下是代码：

  var chapterId=  $(this).data("chapter");

演示：http://jsfiddle.net/ZmV5D/3/

Listview点击事件仅在jQuery Mobile中第一次出现对话框？

1 个答案: