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

这非常有趣。虽然我无法解释，但我确实为您提供了解决方案。颠倒setHTML()和injectInside()行的顺序，并正确插入<td>：

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'))。希望这会有所帮助。

在MooTools Elements中注入时，标签会从文本中剥离

2 个答案: