向HTML5模板添加点击事件
[英]Adding click event to HTML5 template
问题描述
如何将点击事件添加到html5模板标记中？
以下内容从不向图像注册click事件：
<!doctype html>
<body>
<div id="content"></div>
<template id="itemTemplate">
foo
<img id='imageTag' src='image.png'>
</template>
<script>
var templ = document.querySelector('#itemTemplate');
templ.content.querySelector('#imageTag').click = function(){alert('xxxx');};
var content = document.querySelector('#content');
content.appendChild(templ.content.cloneNode(true));
</script>
</body>
1 个解决方案
解决方案1
1 2017-03-28 19:14:22
我自己遇到了同样的问题，我将写出我所学到的东西，以便其他人也能找到答案。
正如腺嘌呤所说，不可能从模板内部做到这一点。 我也尝试过。 您可以做的就是完成模板的创建，并且在DOM中注册了所有元素之后，可以添加事件侦听器。
因此您的代码将如下所示：
<!doctype html>
<body>
<div id="content"></div>
<template id="itemTemplate">
foo
<img id='imageTag' src='image.png'>
</template>
<script>
var templ = document.querySelector('#itemTemplate');
var content = document.querySelector('#content');
content.appendChild(templ.content.cloneNode(true));
document.querySelector('#imageTag').click = function(){alert('xxxx');};
</script>
当我需要将事件侦听器添加到元素数组（试图动态构建分页器）时，我曾经遇到过相同的问题，因此我使用了forEach循环为每个元素赋予其click事件：
for (var i = 0 ; i < totalPages ; i++) {
anchorElement.innerHTML = i + 1;
anchorElement.dataset.pageId = i + 1;
var clone = document.importNode(templateElement.content, true);
paginationContainer.appendChild(clone);
}
// Register pagination event listeners
document.querySelectorAll('.pagination a').forEach(function(anchorElement) {
$(anchorElement).on('click', function() {
alert('Hello');
});
});
原生HTML5拖放事件
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.