Question

好的，下面我发布了我正在使用的脚本和#targetDiv，基本上我的问题是当我移动当前包含在div外#targetDiv内的链接时，链接号更长时间加载div内部的页面，有没有办法可以将链接移到#targetDiv之外，仍然可以将页面内容加载到div中。

脚本

$(function(){
    $('#targetDiv').on('click', 'a', function(e){
         e.preventDefault();// prevent browser from opening url
         $('#targetDiv').load(this.href);   
    });
});

股利

<div id="targetDiv" class="collapse">
<a href="/page.php">Load</a>
</div>

我遇到的问题是我希望load链接在目标div之外，但是当我将它移到div之外时，它会加载主页而不是targetDiv内的内容。

我想要实现的目标;

<a href="/page.php">Load</a>
<div id="targetDiv" class="collapse">
</div>

Answer 1

将类添加到要用于加载内容的任何链接

<a class="content-link" href="/page.php">Load</a>

并相应地修改事件侦听器，以便它处理两种类型的链接

    $(document).on('click', '.content-link, #targetDiv a',function(e){
         e.preventDefault();// prevent browser from opening url
         $('#targetDiv').load(this.href);   
    });

Answer 2

试试这个：

$(function(){
    $('#divLoad').click(function(e){
         e.preventDefault();// prevent browser from opening url
         $('#targetDiv').load(this.href);   
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<a id="divLoad" href="/page.php">Load</a>
   <div id="targetDiv" class="collapse">
</div>

您也可以这样做（更难以准确）：

$(function(){
    var divLoad = $('#targetDiv').prev('a');
    //alert(divLoad.attr('href') );
  
    divLoad.click(function(e){
         e.preventDefault();// prevent browser from opening url
         $('#targetDiv').load(this.href);   
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<a id="divLoad" href="/page.php">Load</a>
   <div id="targetDiv" class="collapse">
</div>

链接定位在div内部;

2 个答案: