javascript - jQuery 不喜欢 .on 和 .append？

Question

我有一个奇怪的问题。我目前正在使用 PHP、AJAX 和 MySQL 加载帖子。代码结构本身如下所示:

我的代码结构

--- ma​​in.js ---

$(window).load(function(){
     initAjax();
});

--- ajax.js ---

function initAjax(){

//   Toggles a navigation

     $(document).on('click', '.btn.open', function(){
         ... toggles a window ...
     });

//   Add new posts

     $(document).on('click', '.btn.refresh', function(){
         $.ajax({
              ... ajax stuff ...,
              success: function(html){
                   // Show new posts
                   $('.post_container').prepend(html);
              }
         });
     });
}

那么问题是什么？

当我附加新帖子时，它们会显示出来，但我无法再单击 .btn.open - 不应该使用“on()”来解决这个问题吗？当我转到 Google Chrome 控制台时。

有人知道解决问题的潜在方法吗？

编辑:

1. 附加的帖子与默认加载的帖子相同!
2. '.btn.open' 存在(div with class="btn open")
3. 我正在使用 jQuery v2.0.3(所以 .on 应该可以工作!，.live 和 .delegate 被 .on 取代了!)
4. 删除了由损坏的 Chrome 扩展程序创建的错误消息 = 无变化。
5. 创建了一个显示实际问题的 .gif:http://d.pr/i/cJB3

6. 已修复! @ cmorrissey通过将 $(document) 替换为 $('body')

   找到了一个小解决方案

   但是

7. 这个修复似乎不是一个完美的解决方案，因为 $(document) 通常必须工作!因为我想要干净代码，所以我完全打算尝试@ Potherca的 Short, Self Contained, Correct, Example方法，我可能会以这种方式找到解决方案。 谢谢

Answer 1

您需要使用'body' 或document.body 而不是document。

    $('body').on('click', '.btn.refresh', function(){
         $.ajax({
              ... ajax stuff ...,
              success: function(html){
                   // Show new posts
                   $('.post_container').prepend(html);
              }
         });
     });

原因:向正文中添加内容不会冒泡到文档级别(http://bugs.jquery.com/ticket/11621)，看起来您也可以使用 window