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

Question

我正在使用以下代码将页面加载到<div> 。 它工作正常，但它不应该将所有链接加载到<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> 

当我点击link 3 （用于转到主页）时，它会打开<div id="output"></div>的主页。

知道为什么会这样吗？

Answer 1

您将click事件分配给a元素，因此所有链接都将在输出div中加载url。 您需要指定要分配click事件的元素，可以通过指定类来指定。

$j("a.loadindiv").click


<a class="loadindiv" href

希望这可以帮助...

Answer 2

链接3正在向“mypage.com”发出请求并获取它返回的html并将其输出到“output”div。 您正在对主页进行AJAX调用，并且正在为您提供页面服务。

您可能需要考虑执行以下操作，而不是让所有元素都使用AJAX函数：

<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>