我写了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(); });
答案 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结构时,代码都会运行(正是我所需要的)。