1

如何将点击事件添加到 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>
4

1 回答 1

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 循环来为每个元素提供其点击事件：

    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');
        });
    });
于 2017-03-28T19:14:22.320 回答