​​标签在注入MooTools元素时被剥离文本

Question

我试图在服务器中获取表行标记的MooTools中构建一些JavaScript，然后将其添加到表中。我有一个名为htmlAjax的对象，它被设置为MooTools Ajax对象。该对象正确地从服务器获取HTML（在Firebug控制台中对其进行了测试），但是当我尝试将此标记添加到新元素时，<td>元素会被剥离。这里是我的功能，从HTTP请求捕获数据并尝试添加一行：

htmlAjax.addEvent('onComplete', function (data) { 
    var slot = new Element('tr'); 
    slot.setHTML(data); 
    slot.injectInside($('volunteer_slots')); 
}); 

我从服务器data回的响应看起来是这样的：

<td><div class="title" rel="60"> 
    <a class="modal" href="index.php?view=volunteerslot&amp;tmpl=component&amp;id=60" rel="{handler: 'iframe', size: {x: 650, y: 550}}" >test</a> 
</div> 
</td> 
<td class="button_column"> 
    <img src="images/publish_x.png" /> 
</td> 
<td>0 minutes</td> 
<td><select name="volunteers[60]" id="volunteers60" class="inputbox"><option value="0" selected="selected">(select...)</option><option value="63" >Joe LeBlanc</option><option value="64" >Test User</option><option value="65" >Test User</option><option value="66" >Test User</option><option value="67" >Test User</option></select></td> 
<td><select name="total_time_spent[60][hours]" id="total_time_spent60hours" ><option value="0" selected="selected">0</option><option value="1" >1</option><option value="2" >2</option><option value="3" >3</option><option value="4" >4</option><option value="5" >5</option><option value="6" >6</option><option value="7" >7</option><option value="8" >8</option><option value="9" >9</option><option value="10" >10</option><option value="11" >11</option><option value="12" >12</option><option value="13" >13</option><option value="14" >14</option><option value="15" >15</option><option value="16" >16</option><option value="17" >17</option><option value="18" >18</option><option value="19" >19</option><option value="20" >20</option><option value="21" >21</option><option value="22" >22</option><option value="23" >23</option><option value="24" >24</option></select>&nbsp;hours&nbsp;&nbsp;<select name="total_time_spent[60][minutes]" id="total_time_spent60minutes" ><option value="0" selected="selected">0</option><option value="15" >15</option><option value="30" >30</option><option value="45" >45</option></select>&nbsp;minutes</td> 
<td class="button_column"> 
    <img src="images/tick.png" /> 
</td> 

有一次，我打电话setHTML,slot变量（通过data），<tbody>元素volunteer_slots有一个新行，但该新行包含除<td>元素以外的所有元素。有什么办法可以防止这种情况发生？

Answer 1

这很有趣。虽然我无法解释它，但我确实有一个解决方案。反向您​​和injectInside()行的顺序，以及<td> s的正确插入：

slot.injectInside($('volunteer_slots')); 
slot.setHTML(data); 

你显然使用MooTools的1.11，但是，这种现象出现在1.2出现为好。很奇怪！它必须与注入之前的slots var之前有关，它不是DOM的一部分。设置非DOM元素的innerHTML的效果可能会出乎意料？我希望我能解释它。当我有时间时，我必须深入挖掘。

Answer 2

您使用的是哪个版本的MooTools？我不确定它是否与此有关，但在最新版本中，没有（据我所知）setHTML方法，现在是set('html', data)。我也相信injectInside已成为slot.inject($('volunteer_slots'))。希望这可以帮助。