Question

我需要在通过AJAX加载页面的一部分后执行给定的javascript函数。我无法控制页面的加载方式，因此从页面中取消一个事件不是一个选项，我想我需要检查正文所需的元素并在此元素存在后执行。

我看到我可以使用jQuery“.on”方法执行此操作，但我的jQuery版本是在此功能引入之前，因此我无法使用它。使用没有第三方库的最佳方法是什么？

以下是使用jQuery的示例：

//bind to the body a "load" handler for elements that have class names of "hello"
$('body').on('load','.hello',function(){
  alert("Hello is fully loaded, proceed with your program logic");
})

PS：在发布此问题之前我已阅读的相关问题。 How to bind a function to Element loaded via Ajax

Answer 1

您可以创建一个在加载元素时调用的函数，以及另一个检查它们是否以一定间隔加载的函数。然后将加载检查功能附加到正文的onload属性。例如：

<body onload="checkLoaded()">

<script type="text/javascript">
    var afterLoaded = function() {
        // code to execute once elements are in place
        console.log("Elements loaded.");
    };

    var checkLoaded = function() {
        var interval = setInterval(function() {
            if(document.getElementsByClassName("hello").length) {
                clearInterval(interval);
                afterLoaded();
            }
        }, 1000);
    };
</script>

Plunker

如何在没有jQuery的情况下通过AJAX加载html元素后在javascript中执行函数？

1 个答案: