jQuery加载页面进入 <div> 问题

Question

I'm using the following code to load a page into a <div> . It works fine except it's not supposed to load all links into the <div> .

<script type='text/javascript'>   
   var $j = jQuery.noConflict();
   $j(document).ready(function(){
        $j("a").click(function(){
             $j.ajax({
              url: $j(this).attr("href"),
              success: function(response) {
               $j("#output").html(response);
              }
             });
             return false;
        });
   });
</script>





 <div>[ <a href="execute.php?cmd=test1">link 1</a]  [ <a
href="execute.php?cmd=test2">link 2</a] [ <a href="mypage.com">link
3</a>]</div>


<div id="output"></div> 

When I click link 3 , used to go to the homepage, it opens the homepage in <div id="output"></div> .

Any idea why this happens?

Answer 1

You are assigning the click event to the a element, so all links will load the url inside the output div. You need to specify which elements to assign the click event, maybe by specifying a class.

$j("a.loadindiv").click


<a class="loadindiv" href

Hope this helps...

Answer 2

Link 3 is making a request to "mypage.com" and taking the html that it returns and outputting it into the 'output' div. You are making an AJAX call to the homepage and it is serving up the page to you.

Rather than having all the elements use the AJAX function you might want to consider doing:

<script type='text/javascript'>   
   var $j = jQuery.noConflict();
   $j(document).ready(function(){
    $j(".ajaxLink").click(function(){
         $j.ajax({
          url: $j(this).attr("href"),
          success: function(response) {
           $j("#output").html(response);
          }
         });
         return false;
    });
 });
</script>





 <div>[ <a href="execute.php?cmd=test1" class="ajaxLink">link 1</a]  [ <a
href="execute.php?cmd=test2" class="ajaxLink">link 2</a] [ <a href="mypage.com">link
3</a>]</div>


<div id="output"></div>