Javascript-ajax调用don'；不能在动态加载的HTML中工作

我正在尝试编写一个通用javascript脚本，以便在只替换内部HTML而不是重新加载整个页面的同时，方便单击

链接。奇怪的是，它可以工作，除了在新加载的HTML中的任何链接上

<script src="{{ asset('bundles/app/js/jquery-2.2.0.min.js') }}"></script>
<script src="{{ asset('bundles/app/js/jquery.menu-aim.js') }}"></script>
<script src="{{ asset('bundles/app/js/main.js') }}"></script>
<script type="text/javascript">

    $(document).ready(function() {
        $("a").on("click", function(){
            event.preventDefault();
            $.ajax({
                'url': $(this).attr('href'),
                type: "post",
                success: function(response, status) {
                    document.getElementById("content").innerHTML = response;
                },
                error: function() {
                    console.log('failure');
                }
            });
        });
    });
</script>

$（文档）.ready（函数（）{
$（“a”）。在（“单击”，函数（）{
event.preventDefault（）；
$.ajax({
'url'：$（this.attr（'href'），
类型：“post”，
成功：功能（响应、状态）{
document.getElementById（“内容”）.innerHTML=响应；
},
错误：函数（）{
console.log（'failure'）；
}
});
});
});

当我将加载的HTML中完全相同的URL直接放在包含初始链接的侧栏菜单中时，它可以正常加载。根据文档，on函数应该附加到以后添加的任何元素上。我也尝试过.delegate和不推荐使用的.live，正如以前的答案所建议的那样，但是即使是菜单边栏也停止了工作

---

我在这里遗漏了什么？

您还必须将该行为应用于加载的HTML，如本例所示（未测试）：

---

您还必须将该行为应用于加载的HTML，如本例所示（未测试）：

---

在这里，我假设您的链接容器是按ID显示的“内容”，如果不使用正确的容器ID进行修复，甚至将它们包装在一个容器中：

$(document).ready(function() {
  $('#content').on('click', 'a', function() {
    event.preventDefault();
    $.ajax({
      'url': $(this).attr('href'),
      type: "post"
    }).done(function(response, status) {
      document.getElementById("content").innerHTML = response;
    }).fail(function() {
      console.log('failure');
    });
  });
});

标记示例：

<div id="content">
    <a href="myurl">clickme</a>
</div>

为什么不希望这样做（文件）；您希望将事件处理程序挂钩放置在尽可能靠近元素的位置；当您像这里那样附加到文档时，if强制代码遍历整个文档，以便事件处理程序找到

a

链接并查找这些链接上的单击

请注意文档中的说明

一个选择器字符串，用于筛选触发事件的选定元素的后代。如果选择器为null或省略，则事件总是在到达选定元素时触发

---

因此，对于本例中的

a

选择器。因此，它将事件处理程序放置在文档中的所有内容上，然后在

a

选择器上进行筛选。因此，如果您将其放置在一个较小的容器中，它必须在执行的每个事件（单击）上过滤较少的内容。

这里我假设您的链接容器是按ID“内容”的，如果不使用正确的容器ID修复，甚至将它们包装在一个容器中：

$(document).ready(function() {
  $('#content').on('click', 'a', function() {
    event.preventDefault();
    $.ajax({
      'url': $(this).attr('href'),
      type: "post"
    }).done(function(response, status) {
      document.getElementById("content").innerHTML = response;
    }).fail(function() {
      console.log('failure');
    });
  });
});

标记示例：

<div id="content">
    <a href="myurl">clickme</a>
</div>

为什么不希望这样做（文件）；您希望将事件处理程序挂钩放置在尽可能靠近元素的位置；当您像这里那样附加到文档时，if强制代码遍历整个文档，以便事件处理程序找到

a

链接并查找这些链接上的单击

请注意文档中的说明

一个选择器字符串，用于筛选触发事件的选定元素的后代。如果选择器为null或省略，则事件总是在到达选定元素时触发

---

---

因此，对于本例中的

a

选择器。因此，它将事件处理程序放置在文档中的所有内容上，然后在

a

选择器上进行筛选。因此，如果您将其放在一个较小的容器中，它必须在执行的每个事件（单击）上过滤较少的内容。

您还需要在新加载的HTML上安装单击处理程序。您需要将单击事件委托给动态添加的内容，如SO

$（parentElement）。on（“click”，“a”，function（）{…

，其中parentElement应该是一个本身不会动态加载的元素。您也可以将文档用作parentElement。可能的重复应该会中断，因为

事件

未定义。我的问题不同，因为我没有动态创建元素，我正在另一个a中加载现有页面l已打开页面您还需要在新加载的HTML上安装单击处理程序。您需要将单击事件委托给动态添加的内容，如so

$（parentElement）。在（“单击”，“a”，函数（）{…

，其中parentElement应该是一个本身不会动态加载的元素。您也可以将文档用作parentElement。可能的重复应该会中断，因为

事件

未定义。我的问题不同，因为我没有动态创建元素，我正在另一个a中加载现有页面lready打开页面我笑得很厉害，因为这个解决方案看起来是如此简单和有效。我花了几个小时阅读jquery教程，但这只是个问题。回答得很好！虽然这确实解决了我的问题，但我不得不把它交给Mark，因为他严格遵循编码标准，在查找元素方面更高效。我对它进行了升级，因为它非常有助于理解JS如何处理元素。没问题，很高兴我能提供帮助：）我笑得很厉害，因为这个解决方案看起来是如此简单和有效。我花了几个小时阅读jquery教程，但这只是胡说八道。回答得很好！虽然这确实解决了我的问题，但我不得不把它交给Mark，因为他严格遵循编码标准，在查找元素方面更高效。我不想再谈了投票，因为它非常有助于理解JS如何处理元素。没问题，很高兴我能提供帮助：）为什么这不可取？我正在使用带有Symfony的小枝块，这对我来说是全新的，这似乎牺牲了可读性以获得一些我不太了解的收获。这会自动附加到新元素上吗？我渴望学习，如果你有任何有趣的阅读材料，我会很高兴地拿起它。为选择过滤器添加注释我看到了，这确实很难看。我没有注意到速度上的差异，因为我的页面很小，但无论如何这是不受欢迎的行为。为什么这不可取？我使用的是Twig blo