Javascript Listview单击事件仅在jQuery Mobile中的对话框中第一次发生？

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

---

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

不要在页面之间使用数据传输的全局变量。使用DOM元素的

data

属性。考虑到我有一个这样的ListVIEW：

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

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

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

对于对话框，我有如下标记：

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

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

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

代码如下：

$(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"
        });
    });
});

//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>" +));
});

//不要使用pageinit，使用pageshow或pagebefore显示对话框
$（文档）。在（“pagebeforeshow”，“dialogPage”，函数（）{
//从数据中获取章节Id
var chapterId=$（本）.data（“章”）；
//你想用它做什么都行。
$（this.find（'[datarole=“content”]p'）.html（“章ID:+）；
});

---

演示：

”。listview li a'

尝试使用此选择器。我只是尝试了一下，但没有成功。关闭对话框时，似乎正在清除事件以返回？是否将单击事件绑定到

pageinit

？如果是，请将其移除。也。是否动态添加了

.listview

？是否正确关闭对话框？如果它仍在页面上，则可能是问题的原因$（#mydialog'）。dialog（'close'）非常优雅，工作非常漂亮-感谢所有的宝石！！！我还更新了一些输入错误和错误：没问题@TruMan1:）我认为您也可以使用$.mobile.changePage中的数据参数，然后解析目标页面的数据url：好的，所以不仅仅是我。。我说我想是因为我正在尝试，但无法正常工作（一些缓存问题）。再次感谢！