jquery Ajax goes to a blank page

问题

jquery is powerful but has a many different problems. i have this code:

 $(
     function () {
         // Get a reference to the content div (into which we will load content).
         var jContent = $("#content");

         // Hook up link click events to load content.
         $("ul li a").click(
             function () {
                 var jLink = $(this);

                 // Clear status list.
                 $("#ajax-status").empty();

                 // Launch AJAX request.
                 $.ajax({
                     // The link we are accessing.
                     url: jLink.attr("href"),

                     // The type of request.
                     type: "GET",

                     // The type of data that is getting returned.
                     dataType: "html",


                     error: function () {
                         ShowStatus("AJAX - error()");

                         // Load the content in to the page.
                         jContent.html("<p>Page Not Found!!</p>");
                     },

                     beforeSend: function () {
                         ShowStatus("AJAX - beforeSend()");
                     },

                     complete: function () {
                         ShowStatus("AJAX - complete()");
                     },

                     success: function (strData) {
                         ShowStatus("AJAX - success()");
                         jContent.html($(strData).find('#bglogin').html());
                     }
                 });

                 // Prevent default click.
                 return (false);
             }
         );

     }
 );

when i use it on my blog it goes to a blank white page. i change it many times, but it does not work. but, when i use it on a blank page, (use this code only for blog) it works and a new problem. we think in this page: /login there are these tags:

<div id="login">
   <div id="bglogin">
     <p>hello</p>
   </div>
</div>

when i call the jquery (jContent.html($( strData ).find('#bglogin').html());) that get #bglogin id, it get the code, but, when i want the #login id, it doesn't get me anything.

回答1:

Dont think its the problem, but you should not use reaturn false. This would be the proper method

$("ul li a").on('click', function (event) {
    event.preventDefault(); // this will stop default behaviour.
    var jLink = $(this);
});

回答2:

With this html:

<div id="login">
   <div id="bglogin">
     <p>hello</p>
   </div>
</div>

This javascript

$(strData).find('#login').html()

does not give you anything because the find method looks for the child elements and your root element in this case is #login. You're looking for a child with id #login from the #login element, the code cannot find it. That's why it does not work. In this case, just simply write:

jContent.html(strData);

来源：https://stackoverflow.com/questions/17511913/jquery-ajax-goes-to-a-blank-page