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

Question

我正在尝试编写一个通用的 javascript 脚本以方便点击 <a href> link 秒，同时仅替换内部 HTML 而不是重新加载整个页面.奇怪的是，它有效，除了新加载的 HTML.

中的任何 link

<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 直接放置在包含初始 link 的侧边栏菜单中时，它加载正常。根据文档，.on 函数应该附加到以后添加的任何元素。我也尝试过 .delegate 和旧答案建议的已弃用的 .live 但后来甚至菜单侧边栏也停止工作了。

我在这里错过了什么？

Answer 1

您还必须将行为应用于已加载的 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();


});

Answer 2

这里我假设您的 link 容器 ID 为 "content"，如果没有使用正确的容器 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');
    });
  });
});

至于为什么这是不可取的（文档）；您希望将事件处理程序挂钩放置在尽可能靠近元素的位置；当您像这里一样附加到文档时，如果强制代码遍历整个文档，以便事件处理程序找到 a link 并寻找对这些内容的点击。

注意文档说

"A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element."

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

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

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

html

javascript

ajax

jquery