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

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

- user2625384

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

说明

• This is called deleyd event binding. Basically it don't care if button is a part of the DOM or not. Event will be bound to the document object and it will propagate when correct element is found in the DOM.

• Second thing, don't bind this just to a a tag, I bet you have more then one button. Use class name or id instead.

• Third thing, you don't need this line:

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

  jQuery Mobile will automatically style your page during the page transition. Just look at my working example.

• Last thing, there could be another problem. If you are using several HTML pages and this javascript is placed inside a HEAD. In this case read this ARTICLE.

- Gajotres

Answer 2

1. 将其放置在包含按钮的页面（带有[data-role=page]）的pageinit事件中。这样，当页面就绪且在DOM中时，您将绑定事件。
2. 使用事件委托将click绑定到锚标记。应该使用页面作为父级，因此当单击发生在a标记上时，标记将在具有[data-role=page]的div中搜索事件。
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
 });

- krishwader

---

@user2625384 你的意思是想保存你创建的页面还是再创建一个新页面？ - krishwader

看起来很不错，但如果我创建了几个页面，而且我不知道它们的ID怎么办 - 例如，我从Web服务器获取信息，没有办法获取ID。我能为所有页面拥有通用的pageinit吗？ - user2625384

似乎这是解决方案，最后一个问题是如何将所有代码与document.ready中的代码结合起来，并使用document.on(pageinit)。 - user2625384

我同意，我确信这只是一个小问题——只需将元素添加到DOM中并使用它。当我看到解决方案时，问题变得有点更大了。在我的document.ready中，我连接到服务器（ajax），使用响应更新listview，然后用户选择一个项目并接收动态表单。 - user2625384

你只有两个按钮，对吧？给这些按钮添加类并将其绑定到“click”事件，就像我在答案中绑定的那样。 - krishwader

Answer 3

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

- David