Question

我有一个按钮，可以创建一个新页面并将其插入到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");
   });

Answer 1

解决方案

工作示例：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中找到正确的元素时，它将传播。
第二件事，不要将它绑定到一个标签，我打赌你有一个以上的按钮。请改用类名或ID。
第三件事，你不需要这一行：
```
$("#test").trigger('create');
```
jQuery Mobile将在页面转换期间自动设置页面样式。看看我的工作示例。
最后，可能还有另一个问题。如果您使用多个HTML页面，并且此javascript放在HEAD中。在这种情况下，请阅读 ARTICLE 。

Answer 2

将其放在页面的pageinit事件中（div带[data-role=page]）按钮所在的位置。这样，当页面准备好并且在DOM中时，您将绑定事件。
使用事件委派将click绑定到锚标记。该页面应该用作父级，因此当点击发生在a标记上时，该标记将针对div中[data-role=page]的事件进行搜索。
使用preventDefault阻止a使用href标记重定向。
删除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
 });

Answer 3

$(document).on('click', 'a', function(event) {
        event.preventDefault();
        // Act on the event
    });

无法激活使用jquery动态创建的链接

3 个答案:

解决方案

代码

说明