Jquery无法识别在生成的HTML模板上发生的事件

我正在使用Handlerbars.js，它为我提供了一个动态生成的动态模板。当我做点击等Jquery事件时，Jquery无法捕捉到这些事件。请帮助我。Jquery无法识别在生成的HTML模板上发生的事件

我想要触发事件时有ID hitUp按钮被点击

HandlerBar.js代码

{{#each this}} 
          <div id="accordion2" class="panel-group"> 
           <div class="panel panel-default"> 
            <div class="panel-heading"> 
             <h4 class="panel-title"> 
              <a href="#{{log}}" data-parent="#accordion2" 
               data-toggle="collapse" class="btn-block" > <img 
               class="img-rounded" src="/assets/images/default-food.png" /> {{log}} 
              </a> 
             </h4> 
            </div> 
            <div class="panel-collapse collapse" id="{{log}}"> 
             <div class="panel-body food-details"> 
              <div class="bm pzero col-xs-12"> 
               <div class="input-group spinner"> 
                <input id="spinid" type="text" 
                 name="demo_vertical2" class="form-control  input-sm" 
                 /> <span class="input-group-btn    vertical"> 
                 <button id="hitUp" 
                  class="btn btn-default bootstrap-touchspin-up" 
                  type="button"> 
                  <i class="fa fa-caret-up"></i> 
                 </button> 
                 <button id="hitDown" 
                  class="btn btn-default bootstrap-touchspin-down " 
                  type="button"> 
                  <i class="fa fa-caret-down"></i> 
                 </button> 
                </span> 
               </div>

HTML代码

<div id="accordion2" class="panel-group"> 
    </div>

的Jquery代码

Try1

$('body').on("click",'#hitUp',function(){ 
    console.log("Functionclicked") 
    });

Try2

$('#hitUp').click(function(){ 
    console.log("Functionclicked") 
    });

Try3

$(document).ready(function( $('body').on("click",'#hitUp',function(){ 
    console.log("Functionclicked") 
    });){})

我已经尝试了上面的jquery方法，但没用。给我一些解决方案

来源

2014-10-28 karthe

检查这个 http://stackoverflow.com/questions/17548265/handling-jquery-onclick-event-on-handlebars – dariogriffo 2014-10-28 16:09:13

它没有帮助我已经检查 – karthe 2014-10-28 16:10:19

我不知道，车把，但不是它创建一个循环：'{{#each this}}'？ – 2014-10-28 16:13:38

就像在@adeno发布的链接中一样，jQuery事件处理程序需要注册为所有JavaScript文件和库加载时发生的最后一件事。调用$（document）.ready（）并不意味着所有的JS文件都已经被加载，这只是意味着DOM已经到位并准备好进行操作了。如果您要使用Handlebars这样的库进行更多DOM操作，则需要确保您的事件处理程序在所有动态生成已经发生之后才进行注册。

因此，如果这是我的模板：

<h1>{{title}}</h1> 
<div>{{body}}</h1> 
<br /> 
{{#each buttonIds}} 
    <input type="button" id="{{this}}" value="Click me" /> 
{{/each}}

这是我的javascript：

var data = { 
    title: 'The Title', 
    body: 'Document Body', 
    buttonIds: [ 'hitUp1', 'hitUp2', 'hitUp3' ] 
}; 
var templateScript = $('#header').html(); 
var template = Handlebars.compile(templateScript); 
$(document.body).append(template(data)); 

$('#hitUp1').on('click', function() { alert('clicked 1'); }); 
$('#hitUp2').on('click', function() { alert('clicked 2'); }); 
$('#hitUp3').on('click', function() { alert('clicked 3'); });

我等待直到最后注册的点击处理程序，以及他们各自独特的身份标识。

Here是一个工作小提琴演示我在说什么。

来源

2014-10-28 18:57:06

不应该使用附加到body或甚至文档的.on（）来解决doc ready已经运行后生成的动态内容问题？例如$（document）.on（“click”，“。hitUp”，function（）{}）; – 2014-10-28 20:31:43

是的，这也可以，只要确保你在ID名称前面使用'＃'。 @karthe从技术上讲，“Try＃3”代码应该可以工作，但是看起来会有一些语法问题。它应该读取$（document）.ready（function（）{$（'body'）。on（'click'，'#hitUp'，function（）{console.log（“Functionclicked”）; }） ;）;''所有嵌套的函数读取都非常混乱。 – 2014-10-29 15:55:54

-2

正面临同样的问题。使用

$('body').on("change", '#amountType', function(){ 

});

这个工作对我来说

来源

2017-09-07 06:47:04 aishwarya

Jquery无法识别在生成的HTML模板上发生的事件

回答

相关问题