Question

我在这里面临一个问题，我不确定这是一个错误还是我的愚蠢。

我基于这个模板构建了一个小部件：

<!--  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中设置）丢失了！

这是正确的行为还是我做错了什么？

Answer 1

好吧，我仍然无法应用上面解释的逻辑。但是：我可以使用livequery应用变通方法。它并不理想，但它确实有效。

嵌套事件在嵌套模板中丢失（？）

1 个答案: