如何在流星上点击动态生成的每个块来显示表单?

时间:2016-08-25 05:17:37

标签: javascript jquery html css meteor

如何在流星的每个代码块上单击动态生成的按钮时显示表单?

<div id="wCard">

                {{#each workflow}}
                <div class="pheader">
                     <h2>{{project}}</h2>
                     <hr width="90%">
                </div>
                     <br>
                 <div class="workflowcard">
                 <div class="module-card">
                   <div>
                    <div class="card-header wfmodule">{{workflowTitle}}</div>
                    <div class="assigned-tag">Assigned To:</div>
                    <div class="assigned-to">{{team}}<hr></div>
                    <div class="actions">No Actions Created</div>
                    </div>
                    <div>
                        due date
                    </div>
                </div>
                 <div class="actionBtn"><button class="btn-wf stage-blue-wf button-x-small-wf" id="newAction">New Action</button></div>

            </div>
                {{/each}}

        </div>  

这张卡在我提交表格时动态生成。在这张卡片中我有一个新的动作按钮,当我点击动态生成的卡片的新动作按钮时,它应该显示另一种形式。

1 个答案:

答案 0 :(得分:0)

使用模板助手和jquery。

示例代码: main.html中

<template name="test">
     <div id="form1" class="hidden">
        Form Stuff
     </div>

     <button id="click_button">Click to Show form</button>

在javascript file-main.js

Template.test.events({
   "click #click_button" : function() {
         $( "#form1" ).removeClass( "hidden");
}

添加引导程序包(class="hidden")后,twbs:bootstrap将起作用。