Question

我正在尝试编写一个通用的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，但后来连菜单边栏都停止了工作。

我在这里缺少什么？

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

这里我假设您的链接容器是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');
    });
  });
});

至于为什么这是不可取的（文件）;您希望将事件处理程序挂钩尽可能靠近元素放置;如果您在此处附加到文档，则强制代码遍历整个文档，以便事件处理程序找到a链接并查找对这些链接的点击。

请注意文档说

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

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

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

2 个答案: