Javascript 将单击事件添加到HTML5模板_Javascript_Html

Javascript 将单击事件添加到HTML5模板

javascript html

Javascript 将单击事件添加到HTML5模板,javascript,html,Javascript,Html,如何将单击事件添加到html5模板标记以下内容从不在图像中注册单击事件： <!doctype html> <body> <div id="content"></div> <template id="itemTemplate"> foo <img id='imageTag' src='image.png'> </template> <scrip

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


福
var temp=document.querySelector（“#itemTemplate”）；
templ.content.querySelector（'#imageTag'）。单击=函数（）{alert（'xxxx'）；}；
var content=document.querySelector（“#content”）；
appendChild（temp.content.cloneNode（true））；

我自己也遇到了同样的问题，我会把我学到的写下来，这样其他人也会有答案

正如腺嘌呤所评论的，不可能从模板内部完成。我也试过了。您可以做的是完成模板创建，当所有元素都注册到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>


福
var temp=document.querySelector（“#itemTemplate”）；
var content=document.querySelector（“#content”）；
appendChild（temp.content.cloneNode（true））；
document.querySelector（'#imageTag'）。单击=函数（）{alert（'xxxx'）；}；

当我需要将事件侦听器添加到元素数组（尝试动态构建分页器）时，我曾经遇到过同样的问题，因此我使用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');
        });
    });

for（var i=0；i

我自己也遇到了同样的问题，我会把我学到的写下来，这样其他人也会有答案

正如腺嘌呤所评论的，不可能从模板内部完成。我也试过了。您可以做的是完成模板创建，当所有元素都注册到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>


福
var temp=document.querySelector（“#itemTemplate”）；
var content=document.querySelector（“#content”）；
appendChild（temp.content.cloneNode（true））；
document.querySelector（'#imageTag'）。单击=函数（）{alert（'xxxx'）；}；

当我需要将事件侦听器添加到元素数组（尝试动态构建分页器）时，我曾经遇到过同样的问题，因此我使用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');
        });
    });

for（var i=0；i

不是

。单击

而是

。再次单击

则不是。模板只是一个不起作用、不可见的标记，可以克隆并用作模板。将事件处理程序附加到克隆。不是

。单击，而是。再次单击，则不会。模板只是一个不起作用、不可见的标记，可以克隆并用作模板。将事件处理程序附加到克隆。