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

标签 javascript html ajax

我需要在通过 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

最佳答案

您可以创建一个函数来在加载元素时调用,并创建另一个函数来检查它们是否每隔一段时间加载一次。然后将负载检查功能附加到主体的 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

关于javascript - 如何在没有 jQuery 的情况下通过 AJAX 加载 html 元素后在 javascript 中执行函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23661304/

相关文章:

javascript - 为什么 react setState 方法是不可变的?

javascript - jQuery - 为什么 $(this) 在子作用域中不起作用?

javascript - jquery 自动滚动 prepend() 成功 [如何]

javascript - 作为 Array.prototype.every() 方法的结果,我如何返回一个 bool 值数组?

html - 当我在 CSS 中调整文本框的大小时,如何让元素移到一边?

javascript - <br> 在工具提示的标题标签中不起作用

html - 使用 CSS 将位置绝对元素宽度调整为内容

ajax - Laravel 5.2 & AJAX - 重定向后显示成功消息

javascript - 如何显示长时间非 ajax 操作的繁忙指示器?

javascript - 选择下拉值时 UpdatePanel 不工作