在句柄上处理jQuery onClick事件

我想设置一个简单的jQuery onClick事件来使UI在句柄模板上动态化。我想知道在特定的点击后添加Class（）。在句柄上处理jQuery onClick事件

考虑HTML（由车把生成）

{{#if hasButton}} 
     <div id="container">  
      <button type="submit" class="myButton">Click me!</button> 
     </div> 
    {{/if}}

即：一按钮中点击后，其容器将会收到一个加载的类，将使用CSS创建的互动。

$(".myButton").on("click", function(event){ 
     $(this).parent().addClass("loading"); 
});

此代码应继续我的车把模板或者我应该改写成它的特殊帮助？是否有任何可以提供的例子，以便我可以研究它，然后开发类似的东西？

在此先感谢！

来源

2013-07-09 Hal

你应该保持'html'，'css'和'js'分离。如果您从模板创建某些内容，则应该知道应在模板中执行哪些操作。（或者是因为您使用服务器中的模板发送此信息），或者是因为您已经知道您的代码。因此，无论注册'callbacks'为您的活动你附加的模板后，还是会使用[代表]（http://api.jquery.com/on/#direct-and-delegated-events）事件（类似： '$（containerWhereYouAddThetemplateTo）。在（“点击”，“.myButton”，函数（）{}）'; –

你必须刷新你的Jquery听众插入节点到你的HTML DOM后。

var source = "<li><a href="{{uri}}">{{label}}</a></li>"; 
var template = Handlebars.compile(source); 
var context = {"uri":"http://example.com", "label":"my label"}; 
$("ul").append(template(context)); 

// add your JQuery event listeners 
$("li").click(function(){ alert("success"); });

来源

2013-09-29 13:05:45

我不确定你的问题到底是什么。如果您在本例中使用父代（）代替prev()，将JavaScript保存在* .js文件中，则代码为perhaps。

来源

2013-07-09 13:29:53 glautrou

的问题是，该事件不会被触发，因为补充说jQuery的根本就没有作品（这段代码实际上变在车把模板不是外部JS）父（顺便说一句，我从上一个（改变）（）为更好的代码的可读性） – Hal

没有必要重新将事件处理程序上的每一个动态DOM更新，如果你在文件级别定义它们：

$(document).on('click','li',function(){ 
    alert('success'); 
});

希望这有助于！ :-)

来源

2014-02-15 07:21:47 murnax

这是它是如何在现代web应用程序做！ – ProblemsOfSumit

话语。这样来做，但我喜欢通过用'document'代替最接近的可渲染节点，尽可能缩小范围，就像您在其中渲染车把模板的div一样。 –

在句柄上处理jQuery onClick事件

回答

相关问题