编译后如何将事件侦听器添加到Handlebars模板?

Startec

我有一个简单的模板设置,如下所示:

<script id="entry" type="text/x-handlebars-template">                                                                                                                                                           

  <p>Some content</p>                                                                                                                                                                                           
  <h2>Language Select:</h2>                                                                                                                                                                                     

  <button type="button" class="btn btn-primary">English</button>                                                                                                                                                                                                                                                                                               

  <h2>Ready:</h2>                                                                                                                                                                                               
  <button type="button" id="play" class="btn btn-success">Play</button>                                                                                                                                         
  <button type="button" id="stop" class="btn btn-danger">Stop</button>                                                                                                                                                                                                                                                                                                               

</script>

但是,在我的文档中,我也有一个脚本,其内容如下:

var playButton = document.querySelector('#play');

playButton.addEventListener('click', function (e) {                                                                                                                                                               
  sendMessage('Cue', 'Play');                                                                                                                                                                                     
}, false);  

在大多数情况下(但并非总是如此),由于javascript的异步特性,它返回:

Uncaught TypeError: Cannot read property 'addEventListener' of null

如果我以setTimeout一定数量包装该代码,它将始终有效。

有人可以向我解释将事件侦听器从脚本添加到生成的模板内容的最佳方法吗?

我看着这个答案,但似乎他们建议的方法只是在添加事件侦听器之前添加延迟。

哎呀呀

抱歉,忘记我以前的回答。

首先需要渲染模板,然后将此html插入正文...

var source = document.querySelector("#some-template").innerHTML; 
var template = Handlebars.compile(source);
document.body.innerHTML = template();

然后添加侦听器...

http://jsfiddle.net/jwrae0n2/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何将事件侦听器添加到模板字符串

来自分类Dev

如何将侦听器事件添加到由DefaultListModel对象添加的JList元素?

来自分类Dev

如何将侦听器事件添加到由DefaultListModel对象添加的JList元素?

来自分类Dev

如何将侦听器添加到表?

来自分类Dev

如何将事件侦听器添加到JavaScript中的许多按钮?

来自分类Dev

如何将onkeypress事件侦听器添加到输入标签

来自分类Dev

如何将事件侦听器添加到tone.js中播放的音符

来自分类Dev

如何将事件侦听器添加到动态创建的HTML列表元素?

来自分类Dev

如何将事件侦听器添加到Redux表单

来自分类Dev

如何将事件侦听器添加到<input type = number>的默认箭头按钮

来自分类Dev

如何将事件侦听器添加到画布上绘制的矩形?

来自分类Dev

如何将事件侦听器添加到数组中的每个元素?

来自分类Dev

如何将事件侦听器添加到仅按钮元素

来自分类Dev

iOS UIWebView:如何将侦听器添加到DOM事件?

来自分类Dev

如何将事件侦听器添加到JavaScript中的许多按钮?

来自分类Dev

如何将事件侦听器添加到OverlayView?

来自分类Dev

如何将事件侦听器添加到 Map 标记 [] 数组

来自分类Dev

如何将 updateend 事件侦听器添加到两个对象?

来自分类Dev

如何将事件侦听器添加到“+”缩放元素?

来自分类Dev

如何将事件侦听器添加到使用Jquery Event构造函数创建的Jquery Event中

来自分类Dev

如何将事件侦听器添加到Google图表的PieChart的特定部分(数据栏)?

来自分类Dev

如何将动作事件侦听器的多个结果添加到对话框

来自分类Dev

将事件侦听器添加到if语句

来自分类Dev

将拖动事件侦听器添加到iframe

来自分类Dev

将setTimeout添加到事件侦听器

来自分类Dev

将setTimeout添加到事件侦听器

来自分类Dev

将setTimeout添加到事件侦听器

来自分类Dev

将setTimeout添加到事件侦听器

来自分类Dev

将事件侦听器添加到绘制的对象

Related 相关文章

  1. 1

    如何将事件侦听器添加到模板字符串

  2. 2

    如何将侦听器事件添加到由DefaultListModel对象添加的JList元素?

  3. 3

    如何将侦听器事件添加到由DefaultListModel对象添加的JList元素?

  4. 4

    如何将侦听器添加到表?

  5. 5

    如何将事件侦听器添加到JavaScript中的许多按钮?

  6. 6

    如何将onkeypress事件侦听器添加到输入标签

  7. 7

    如何将事件侦听器添加到tone.js中播放的音符

  8. 8

    如何将事件侦听器添加到动态创建的HTML列表元素?

  9. 9

    如何将事件侦听器添加到Redux表单

  10. 10

    如何将事件侦听器添加到<input type = number>的默认箭头按钮

  11. 11

    如何将事件侦听器添加到画布上绘制的矩形?

  12. 12

    如何将事件侦听器添加到数组中的每个元素?

  13. 13

    如何将事件侦听器添加到仅按钮元素

  14. 14

    iOS UIWebView:如何将侦听器添加到DOM事件?

  15. 15

    如何将事件侦听器添加到JavaScript中的许多按钮?

  16. 16

    如何将事件侦听器添加到OverlayView?

  17. 17

    如何将事件侦听器添加到 Map 标记 [] 数组

  18. 18

    如何将 updateend 事件侦听器添加到两个对象?

  19. 19

    如何将事件侦听器添加到“+”缩放元素?

  20. 20

    如何将事件侦听器添加到使用Jquery Event构造函数创建的Jquery Event中

  21. 21

    如何将事件侦听器添加到Google图表的PieChart的特定部分(数据栏)?

  22. 22

    如何将动作事件侦听器的多个结果添加到对话框

  23. 23

    将事件侦听器添加到if语句

  24. 24

    将拖动事件侦听器添加到iframe

  25. 25

    将setTimeout添加到事件侦听器

  26. 26

    将setTimeout添加到事件侦听器

  27. 27

    将setTimeout添加到事件侦听器

  28. 28

    将setTimeout添加到事件侦听器

  29. 29

    将事件侦听器添加到绘制的对象

热门标签

归档