Question

我写了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（）; }）;

Answer 1

您可能会受益于使用jQuery.on（）。

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

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

Answer 2

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

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

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

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

2 个答案: