Javascript ajax 调用在动态加载的 HTML 中不起作用

Javascript ajax calls don't work inside of dynamically loaded HTML

本文关键字：HTML 不起作用 加载 动态 ajax 调用 Javascript      更新时间：2023-09-26

我正在尝试编写一个通用的javascript脚本，以方便点击<a href>链接，同时仅替换内部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>

当我将加载的HTML中的完全相同的URL直接放置在包含初始链接的侧边栏菜单中时，它会加载正常。根据文档，.on 函数应将自身附加到稍后添加的任何元素。我也尝试了 .delegate 和旧答案建议的已弃用的 .live，但随后甚至菜单侧边栏也停止工作。

我在这里错过了什么？

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

$(document).ready(function() {
    function addBehaviour() {
        // .off first so existing behaviour will be removed and not applied multiple times
        $("a").off("click").on("click", function(){
            event.preventDefault();
            $.ajax({
                'url': $(this).attr('href'),
                type: "post",
                success: function(response, status) {
                    document.getElementById("content").innerHTML = response;
                    addBehaviour(); // add the behaviour
                },
                error: function() {
                    console.log('failure');
                }
            });
        });
    }   
    addBehaviour();

});

在这里，我假设您的链接容器是按 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>

这不是可取的，（将其放在文档上）将处理程序放在容器上如果可以的话

$(document).ready(function() {
  $(document).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');
    });
  });
});

至于为什么这是不可取的（文档）;您希望将事件处理程序钩子放置在尽可能靠近元素的位置;当您像这里一样附加到文档时，if 强制代码遍历整个文档，以便事件处理程序查找a链接并查找对这些链接的单击。

请注意，文档说

"一个选择器字符串，用于过滤触发事件的选定元素的后代。如果选择器为 null 或省略，则在到达所选元素时始终触发事件。

因此，对于您情况下的a选择器。 因此，它将事件处理程序放在文档中的所有内容上，然后筛选您的a选择器。因此，如果您将其放在较小的容器上，则它必须对执行的每个事件（单击）进行较少的过滤。

相关文章：