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

来源

2013-10-04 Fredrik

不'.click'但'.onclick' – Krzysiek

你不知道。模板只是一个非功能性的，不可见的标记，可以作为模板进行克隆和使用。将事件处理程序附加到克隆。 – adeneo

在同样的问题来了我自己，我会写什么我学到了其他人将有一个答案为好。

由于腺嘌呤评论说，不可能从模板内部做到这一点。我也尝试过。你可以做什么，完成模板创建，并且当所有元素都注册在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'); 
     }); 
    });

来源

2017-03-28 19:14:22 Narxx

将点击事件添加到HTML5模板

回答

相关问题