我在这里遇到了一个问题,我不确定这是一个错误还是我的愚蠢。
我已经基于此模板构建了一个小部件:
<!-- TEMPLATE A -->
<div class="mplc-widget">
<div class="mplc-widget-available">
<div class="mplc-widget-header">Available options</div>
<div class="mplc-widget-middle"><input></input></div>
<div class="mplc-widget-choices">
<table>
{{each(i, choice) choices}}
<tr name="${choice[0]}">
<td>${choice[1]}</td>
</tr>
{{/each}}
</table>
</div>
</div>
<div class="mplc-widget-selector">
<div><button>A</button></div>
<div><button>B</button></div>
</div>
<div class="mplc-widget-chosen">
<div class="mplc-widget-header">Selected options</div>
<div class="mplc-widget-choices">
<table>
</table>
</div>
</div>
</div>
渲染此模板(使用widget = $.tmpl(...)
)后,按钮 A 和按钮 B 绑定到一个click
事件,如下所示:
$('button', widget).bind('click', function(){alert('Hello world!');})
然后widget
被退回。渲染前一个模板并绑定事件的函数在另一个模板中被调用:
<!-- TEMPLATE B -->
<div class='form'>
<table>
{{each(i, field) fields}}
<tr>
{{if field.fieldname}}
<p>
<td {{if field.required}} class='field-required'{{/if}}>
${field.label}:</td> <td>{{tmpl field.create()}}
{{if field.help_text}}<br/><span class='help_text'>${field.help_text}</span>{{/if}}
</td>
</p>
</tr>
{{/if}}
{{/each}}
</table>
</div>
在这个模板{{tmpl field.create()}}
中代表渲染和返回的函数template A
。插入 DOM 时,所有元素都显示正常,但绑定功能(设置在 中create
)丢失了!
这是正确的行为还是我做错了什么?