我制作了一个“组件”系统,它将HTML代码附加到包含某些类的某些元素,例如以下元素:
<!-- eBtn -->
<div class="eBtn pageChanger" text="SPEED TEST" page="demo" style="margin-bottom: 10px;"></div>
导入一个写有“速度测试”的按钮。导入的buton具有以下代码模板:
<!-- eBtn -->
<div class="frow center">
<div class="eBtn-left frow center">
<div class="eBtn-line-c2 fcol center">
<div class="eBtn-line2"></div>
</div>
<div class="eBtn-line-c1 fcol center">
<div class="eBtn-line1 l1l"></div>
</div>
</div>
<div class="eBtn-frame">
<div class="eBtn-bg">
<span id="eBtn" class="eBtn-text uB">text</span>
</div>
</div>
<div class="eBtn-right frow center">
<div class="eBtn-line-c1 fcol center">
<div class="eBtn-line1 l1r"></div>
</div>
<div class="eBtn-line-c2 fcol center">
<div class="eBtn-line2"></div>
</div>
</div>
</div>
使用这个模板,我可以轻松地导入组件,但我遇到了一个问题,我不知道如何解决,我前面显示的第一个具有ebtn
类的元素也具有PageChanger
类和一个page
属性,我的导航脚本使用以下函数来更改页面:
$(".pageChanger").click(function() { // When user click on a pagechanger elt
clearTimeout(eContainerInstance); // Clear the eContainer instance to avoid weird bahavior
clearTimeout(navLoadInstance); // Clear navLoad instance
var newPage = $(this).attr("page"); // get clicked elt destination
console.log(newPage)
changePage(newPage); // Change page to the desired page
$(".navbar").addClass("toggled"); // add toggled to navbar to be sure it is not affected by ScrollFx until user scrolls
});
它适用于除了我的EBTN之外的任何其他元素,我确实使用ebtn
容器来用CSS动画它的内容,这样当单击它时它应该可以工作(我甚至在它上面添加了pointer-events:all
)但函数甚至没有被调用。
我不知道在单击PageChanger
的子元素时如何触发该函数。
在执行jQuery时,可能还没有加载动态HTML内容。
您可以尝试在文档上添加事件侦听器,如下所示,以便使它在任何动态添加的HTML内容上工作:
$(document).on('click', '.pageChanger', function(){ ... });