0

我在列表视图项上附加了一个单击事件，该事件会输入对话框。当我关闭对话框并尝试单击另一个项目时，单击事件不会再次发生。我所拥有的或更好的方法有什么问题吗？

        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
            }
        });

这就是我的列表视图的样子：

<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，但结果相同）。任何帮助将不胜感激！

4

1 回答 1

2

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

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

我在 id 的页面中有这个#mypage1。该页面的 pageinit 函数将包含您的click函数。变化 ：

  1. 不要将点击绑定到ul. 将其绑定到a标签。
  2. 用于e.preventDefault()在您获得章节 ID 之前停止重定向
  3. 将章节 ID 存储data在#dialogPage
  4. 用于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>

对于对话框，所做的更改：

  1. 不要使用pageinit. 该事件只发生一次，使用pageshowor pagebeforeshow，每次到达对话框时都会发生。

  2. data从of中获取 chapterid 的值#dialogPage：

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

这是代码：

//dont use pageinit, use pageshow or pagebefore show for dialog
$(document).on("pagebeforeshow", "#dialogPage", function () {
    //get the chapter Id from data
    var chapterId=  $(this).data("chapter");
    //do anything you want with it.
    $(this).find('[data-role="content"] p').html("<b>Chapter ID : </b>" +));
});

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

于 2013-07-16T04:20:53.563 回答