<td> 标签在注入 MooTools 元素时从文本中剥离答案

【问题标题】：<td> tags are stripped from text when injected in MooTools Elements<td> 标签在注入 MooTools 元素时从文本中剥离
【发布时间】：2009-09-12 02:13:42
【问题描述】：

我正在尝试在 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>

一旦我在slot 变量上调用setHTML（传入data），<tbody> 元素volunteer_slots 就会有一个新行，但该新行包含除<td> 元素之外的所有内容。有什么办法可以防止这种情况发生吗？

【问题讨论】：

标签： javascript html ajax mootools

【解决方案1】：

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

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

您显然使用的是 MooTools 1.11，但是，这种行为似乎也出现在 1.2 中。很奇怪！这一定与在slots var 被注入之前，它不是DOM 的一部分这一事实有关。设置非 DOM 元素的 innerHTML 的效果可能出乎意料？我希望我能解释一下。有时间我会深入挖掘。

【讨论】：

这个很好。 mootools 有时会对它注入的元素做一些奇怪的事情，我已经把它从块到内联的样式弄乱了，元素注入到带有溢出的 div 中......

【解决方案2】：

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

【讨论】：