在不使用jQuery的情况下，通过AJAX加载html元素后，如何在JavaScript中执行函数？

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：发布此问题之前，我已经阅读了相关问题。 如何将函数绑定到通过Ajax加载的Element

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 个解决方案

解决方案1
2 已采纳 2014-05-14 17:57:10

在不使用jQuery的情况下，通过AJAX加载html元素后，如何在JavaScript中执行函数？

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-05-14 17:57:10

解决方案1
2 已采纳 2014-05-14 17:57:10