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>

jQuery将页面加载到<div>问题</div>中

2 个答案: