3

我有一个按钮，可以创建一个新页面并将其插入到 dom 中。当我单击新按钮时，没有任何反应。我希望再次触发事件处理程序。有什么建议么 ？

   $("a").on("click", function () {
       var html = "";
       html += '<div data-role="page" data-url="newpage" data-theme="e" id="test" data-prefetch="true">' +
           '<div data-role="header" data-theme="b" data-position="inline">' +
           '<h3>"dynamic page"</h3>' +
           '</div>' +
           '<div data-role="content" data-theme="a" class="dynamicPage">' +
           ' <a href="#" data-role="button" id="workIT"   > Save </a>' +
           '</div></div>';
       $(html).appendTo($.mobile.pageContainer);
       $("#test").trigger('create');

       $.mobile.changePage("#test");
   });
4

3 回答 3

3

解决方案

工作示例：http: //jsfiddle.net/Gajotres/PMrDn/55/

代码

你想像这样使用它：

$(document).on("click", "a",function () {
   var html = "";
   html += '<div data-role="page" data-url="newpage" data-theme="e" id="test" data-prefetch="true">' +
       '<div data-role="header" data-theme="b" data-position="inline">' +
       '<h3>"dynamic page"</h3>' +
       '</div>' +
       '<div data-role="content" data-theme="a" class="dynamicPage">' +
       ' <a href="#" data-role="button" id="workIT"   > Save </a>' +
       '</div></div>';
   $(html).appendTo($.mobile.pageContainer);

   $.mobile.changePage("#test");
})

解释

  • 这称为deleyd 事件绑定。基本上它不关心按钮是否是 DOM 的一部分。事件将绑定到文档对象，并在 DOM 中找到正确的元素时传播。

  • 第二件事，不要只将它绑定到 aa 标签，我敢打赌你有不止一个按钮。请改用类名或 id。

  • 第三件事，你不需要这一行：

    $("#test").trigger('create');

    jQuery Mobile 将在页面转换期间自动设置页面样式。看看我的工作示例。

  • 最后一件事，可能还有另一个问题。如果您使用多个 HTML 页面并且此 javascript 放置在 HEAD 中。在这种情况下，请阅读这篇文章。

于 2013-07-27T11:55:58.330 回答
1
  1. 将它放在按钮所在pageinit的页面（divwith ）的事件中。[data-role=page]这样，当页面准备好并且在 DOM 中时，您将绑定事件。
  2. 使用事件委托将 绑定click到锚标记。该页面应用作父页面，因此当点击发生在a标签上时，该标签将搜索divwith中的事件[data-role=page]。
  3. 用于preventDefault阻止a使用href标签进行重定向。
  4. 删除trigger("create")- 不必要，因为 jQM 在页面转换期间会处理此问题。

这是代码：

$(document).on("pageinit", "#mypage", function () {
    var $page = $(this);
    $(this).on("click", "a", function (e) {
        e.preventDefault();
        //your code 
         html += '<div data-role="page" data-url="newpage" data-theme="e" id="test" data-prefetch="true">' +
        '<div data-role="header" data-theme="b" data-position="inline">' +
        '<h3>"dynamic page"</h3>' +
        '</div>' +
        '<div data-role="content" data-theme="a" class="dynamicPage">' +
        ' <a href="#" data-role="button" id="workIT"   > Save </a>' +
        '</div></div>';
      $(html).appendTo($.mobile.pageContainer);
      $.mobile.changePage("#test");
    });
});

如果您希望能够使用动态页面的保存按钮，请为该页面添加一个pageinit事件。在你的情况下，那将是#test：

$(document).on("pageinit", "#test", function () {
   //event delegation - binds the click to the <a> tags inside the page #test
    $(this).on("click", "a", function (e) {
        e.preventDefault();
        alert("Saved!");
    });
});

（更新）演示：http: //jsfiddle.net/hungerpain/V6QG2/

更通用的pageinit： 

 $(document).on("pageinit", "[data-role=page]", function() {
   //your code
 });
于 2013-07-27T11:57:52.107 回答
0 
$(document).on('click', 'a', function(event) {
        event.preventDefault();
        // Act on the event
    });
于 2013-07-27T11:56:09.333 回答