在我的meteorjs应用程序中,我遇到了一个问题。我做了手风琴, 点击它时迅速打开和关闭.我做了控制台日志,看到一键激活功能两次。这是我的代码:
<div class="rounded">
<ul>
{{#each tasksToDo}}
{{>task}}
{{/each}}
</ul>
</div>
<template name="task">
<li class="list_item">
<divs class="editable-text-trigger">
<span>{{> editableText collection="tasks" field="title" wysiwyg=true}}</span>
</divs>
<div class="editBt">
<button class="completed">Completed</button><button class="edit">Edit</button><button class="delete">Delete</button>
</div>
</li>
Template.task.onRendered(function(){
$('.list_item').click(function(){
$('.editBt-active').children('.editBt').hide(400);
if(!$(this).hasClass('editBt-active')){
if($('.list_item').hasClass('editBt-active')){
$('.list_item').removeClass('editBt-active');
}
$(this).addClass('editBt-active').children('.editBt').show(400);
}else{
$(this).removeClass('editBt-active');
}
});
});
编辑:尝试这不起作用
'click .list_item':function(click,task){
$('.list_item').click(function(){
$('.editBt-active').children('.editBt').hide(400);
if(!$(this).hasClass('editBt-active')){
if($('.list_item').hasClass('editBt-active')){
$('.list_item').removeClass('editBt-active');
}
$(this).addClass('editBt-active').children('.editBt').show(400);
}else{
$(this).removeClass('editBt-active');
}
});
}, still the same
第二次编辑:
Template.task.events({
'click .delete': function(){
Meteor.call("deleteTask",this._id);
},
'click .list_item':function(click,task) {
$(task.find('.editBt')).hide('.editBt');
},
'click .editable-text-trigger': function(click, task){
$(task.find('.editable-text-trigger')).addClass('test');
},
'click .edit': function(click,task){
$(task.find('.test')).trigger('click');
},
'blur .editable-text-trigger': function(blur, task){
$(task.find('.editBt')).hide('.editBt');
}
});
在呈现新的task
模板实例时,向所有现有.list_item
元素(包括来自task
模板的其他实例的元素)再添加一个事件处理程序。
在 Meteor 中,定义事件处理程序的"官方"方法是:(http://docs.meteor.com/#/full/template_events)
Template.task.events({
'click .list_item': function(event, template){
// here the handler logic
}
});
它将只为一个.list_item
元素注册一个事件处理程序。