是否可以在尚未加载的元素上调用方法?

时间:2018-10-04 02:39:39

标签: javascript jquery asynchronous dom

我写了this small JQuery plugin to load content on a specific DOM element according to the hashchange,但是在使MaterializeCSS's carousel正常工作时遇到了问题。

这是home.html:

Status

这是我的index.js:

<div class="carousel">
    <a class="carousel-item" href="#one!">
        <img src="src/assets/carousel_slide_0.jpg">
    </a>
    <a class="carousel-item" href="#two!">
        <img src="src/assets/carousel_slide_1.jpg">
    </a>
    <a class="carousel-item" href="#three!">
        <img src="src/assets/carousel_slide_2.jpg">
    </a>
</div>

由于我已将“索引”哈希附加到该“ home.html”文件,因此每次哈希更改为import "materialize-css/dist/js/materialize.min.js" import "materialize-css/dist/css/materialize.min.css" import "styles/vovojo.less" import "./hashy-content.js" $(document).ready(function () { $(".dropdown-trigger").dropdown({ hover: true, constrainWidth: false }); $("#content").addHash("index", "src/content/home.html"); $("#content").addHash("quem-somos", "src/content/quem_somos.html"); $("#content").addHash("contato", "src/content/contato.html"); $().watch(); }); 时,#index的内容都会加载到“内容” ID中。问题是,当index.html的DOM准备就绪并且哈希被附加到该home.html时,home.html元素尚不存在,因此当内容被加载(jQuery.load())时,轮播无法正常工作。如果我将一个函数与要在加载内容之后被调用的函数相关联,则会遇到与其他依赖项有关的各种错误。

那么,是否可以在尚未加载的元素上应用方法? (以某种方式做出承诺/“等待”)

赞:

$(document).whenNonExistentElementIsReady(function(){     $(“#NonExistentElement”)。doSomething(); });

2 个答案:

答案 0 :(得分:2)

您可能会受益于使用jQuery.on()。

https://www.w3schools.com/jquery/event_on.asp

.on()方法将事件附加到FUTURE元素以及当前存在的元素上。

答案 1 :(得分:0)

我会给Ringo正确的答案,因为它是正确的(当我将“ click”事件附加到身体上时,我就设法使旋转木马在单击后起作用)。对于我的特定问题,我已经找到了一个不太明显的解决方案,这里将为以后的用户提供这些解决方案:

$("#content").bind("DOMSubtreeModified", function () {
    $(".carousel").carousel();
});

现在,每次修改该元素的HTML / DOM结构时,代码都会运行(正是我所需要的)。