jQuery更改事件不适用于输入:Handlebars.js模板中的单选按钮

艾伦·托马斯

我正在使用Handlebars.js输出一系列问题/答案表格。每个问题只有1个答案,所以我正在使用<input type="radio">下面的代码产生所期望的结果然而当无线电按钮被选中了jQuerychange事件不点火。

<script id="questions-template" type="text/x-handlebars-template">
{{#questions}}
{{questionIndex @index}}
<article class="question question-{{@index}} clearfix">
  <h2>{{question}}</h2>
  <form>
    {{#each answers}}
    <div class="answer">
      <input type="radio" name="radios[{{../questionIndex}}]" id="radios-{{../questionIndex}}{{@index}}" value="{{value}}">
      <label for="radios-{{../questionIndex}}{{@index}}"><span>{{answer}}</span></label>
    </div>
    {{/each}}
  </form>
</article>
{{/questions}}
</script>
<div id="questions"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>
<script>
$(function(){
  var questions = {
    "questions": [
      { 
        "question": "Lorem ipsum dolor sit amet, consectetur adipiscing elit?", 
        "answers": [
          { 
            "answer": "Answer 1",
            "value": 1
          },
          { 
            "answer": "Answer 2",
            "value": 2
          }
        ]
      }
    ]
  };

  $(document).ready(function(event) {
    var
    source = $("#questions-template").html(),
    template = Handlebars.compile(source);
    Handlebars.registerHelper('questionIndex', function(value) {
      this.questionIndex = Number(value);
    });
    $('#questions').append(template(questions));
  });

  $('input:radio').change(function(event) {
    alert('change');
  });
});
</script>
比尔吉特·马丁内尔(Birgit Martinelle)

您应该使用.on来分配事件处理程序-因为您的单选按钮是动态生成的。试试这个:

  $("#questions").on("change", "input:radio", function(event) {//assuming questions is already part of the DOM
    alert('change');
  });

为什么在这里使用jQuery on()而不是click()可以很好地理解将事件处理程序附加到动态生成的元素上的方法

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

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

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

jQuery不适用于按钮事件

来自分类Dev

jQuery事件委托不适用于某些按钮

来自分类Dev

Jquery 事件不适用于 append() 中的元素

来自分类Dev

更改jQuery中的复选框不适用于文本!主干.js中的模板

来自分类Dev

jQuery事件不适用于生产中的heroku,但适用于开发中

来自分类Dev

onclick不适用于按钮输入

来自分类Dev

jQuery .val()不适用于单选按钮

来自分类Dev

Switch语句jQuery不适用于单选按钮值

来自分类Dev

单选按钮不适用于 jquery 附加?

来自分类Dev

谷歌地图addListener不适用于输入按钮单击事件

来自分类常见问题

jQuery-Click事件不适用于动态创建的按钮

来自分类Dev

Leaflet + Cordova + Jquery + Jquerymobile:弹出窗口按钮上的点击事件不适用于 iOS

来自分类Dev

更改 tkinter 中按钮的颜色适用于 Windows,但不适用于 Mac OSX

来自分类Dev

模板事件不适用于Meteorjs的Modals

来自分类Dev

jQuery-Android-“ Keyup”事件不适用于Chrome中的退格键

来自分类Dev

分页单击事件不适用于jquery数据表中的页码

来自分类Dev

jQuery .click事件不适用于chrome扩展名中的图片

来自分类Dev

Click事件不适用于动态添加的按钮

来自分类Dev

Appcelerator Facebook登录按钮事件不适用于Alloy

来自分类Dev

GetField不适用于[按钮上的事件]控件

来自分类Dev

Onclick事件不适用于提交类型按钮

来自分类Dev

HTML 5模式不适用于按钮的onclick事件

来自分类Dev

Appcelerator Facebook登录按钮事件不适用于Alloy

来自分类Dev

单击事件不适用于动态添加的按钮或面板

来自分类Dev

单击事件不适用于动态创建的按钮

来自分类Dev

onclick不适用于输入类型=按钮

来自分类Dev

Laravel - 文本输入搜索不适用于按钮点击

来自分类Dev

JS事件委托不适用于某些组件

来自分类Dev

Hammer.js:滑动事件不适用于图像

Related 相关文章

  1. 1

    jQuery不适用于按钮事件

  2. 2

    jQuery事件委托不适用于某些按钮

  3. 3

    Jquery 事件不适用于 append() 中的元素

  4. 4

    更改jQuery中的复选框不适用于文本!主干.js中的模板

  5. 5

    jQuery事件不适用于生产中的heroku,但适用于开发中

  6. 6

    onclick不适用于按钮输入

  7. 7

    jQuery .val()不适用于单选按钮

  8. 8

    Switch语句jQuery不适用于单选按钮值

  9. 9

    单选按钮不适用于 jquery 附加?

  10. 10

    谷歌地图addListener不适用于输入按钮单击事件

  11. 11

    jQuery-Click事件不适用于动态创建的按钮

  12. 12

    Leaflet + Cordova + Jquery + Jquerymobile:弹出窗口按钮上的点击事件不适用于 iOS

  13. 13

    更改 tkinter 中按钮的颜色适用于 Windows,但不适用于 Mac OSX

  14. 14

    模板事件不适用于Meteorjs的Modals

  15. 15

    jQuery-Android-“ Keyup”事件不适用于Chrome中的退格键

  16. 16

    分页单击事件不适用于jquery数据表中的页码

  17. 17

    jQuery .click事件不适用于chrome扩展名中的图片

  18. 18

    Click事件不适用于动态添加的按钮

  19. 19

    Appcelerator Facebook登录按钮事件不适用于Alloy

  20. 20

    GetField不适用于[按钮上的事件]控件

  21. 21

    Onclick事件不适用于提交类型按钮

  22. 22

    HTML 5模式不适用于按钮的onclick事件

  23. 23

    Appcelerator Facebook登录按钮事件不适用于Alloy

  24. 24

    单击事件不适用于动态添加的按钮或面板

  25. 25

    单击事件不适用于动态创建的按钮

  26. 26

    onclick不适用于输入类型=按钮

  27. 27

    Laravel - 文本输入搜索不适用于按钮点击

  28. 28

    JS事件委托不适用于某些组件

  29. 29

    Hammer.js:滑动事件不适用于图像

热门标签

归档