Question

如何将单击事件添加到html5模板标记？

以下内容从不使用图像注册点击事件：

<!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>

Answer 1

我自己遇到了同样的问题，我会写下我所学到的知识，以便其他人也有答案。

正如腺嘌呤评论的那样，从模板内部做到这一点是不可能的。我也试过了。您可以做的是完成模板创建，当所有元素都在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');
        });
    });

将click事件添加到HTML5模板

1 个答案: