jQuery不喜欢.on和.append吗？

Question

I have a weird problem. I'm currently working on loading posts using PHP, AJAX and MySQL. The code structure itself looks like this:

My code structure

--- main.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);
              }
         });
     });
}

So what is the problem?

When I append new posts they'll show up, but I am not able to click .btn.open anymore - Shouldn't 'on()' fix this? When I go to the Google Chrome console.

Does somebody know a potential way to solve the problem?

Edit:

1. The appended posts are the same as the default loaded posts!
2. '.btn.open' exists (div with class="btn open")
3. I am using jQuery v2.0.3 ( so .on should work! , .live and .delegate were replaced by .on! )
4. Removed an error message that was created by a corrupted Chrome extention = No change.
5. Created a .gif showing the problem in action: http://d.pr/i/cJB3

6. FIXED! @ cmorrissey found a small solution by replacing $(document) with $('body')

   BUT

7. This fix doesn't seem to be a perfect solution since $(document) normally has to work! Since I want clean code, I am totally going to try out @ Potherca 's Short, Self Contained, Correct, Example method and probably I'll find the solution this way. Thanks

Answer 1

You need to use 'body' or document.body instead of document .

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

Reason: The addition of content to the body doesn't bubble up to the document level ( http://bugs.jquery.com/ticket/11621 ), it looks like you can also use window