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

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


});