Question

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

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

Jquery曾经两次点击循环

1 个答案: