javascript - 链接定位在div内部；

好吧，下面我发布了我正在使用的脚本和#targetDiv，基本上我的问题是当我将当前包含在#targetDiv中的链接移到div之外时，该链接不再将页面加载到div，有什么办法可以将链接移到#targetDiv之外，仍然让其将页面内容加载到div内。

脚本

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

DIV

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

最佳答案

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

<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);
    });