javascript - Jquery 一次点击循环两次

Question

在我的 meteorjs 应用程序中我遇到了问题。我制作了 Accordion ，当点击它时它会快速打开和关闭。我做了控制台日志，看到一键激活功能两次。这是我的代码:

<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');
    }
});

Answer 1

在呈现一个新的 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 元素注册一个事件处理程序。