代码之家 › 专栏 › 技术社区 › jlleblanc

<td>在moootools元素中注入时,标记将从文本中剥离。

mootools ajax html javascript

jlleblanc · 技术社区 · 15 年前

我尝试在moootools中构建一些javascript,它从服务器获取表行标记,然后将其添加到表中。我有一个叫 htmlAjax 它被设置为一个moootools 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 变量(传入 数据 )的 <tbody> 要素 volunteer_slots 有新行,但该新行包含除 <TD & GT; 元素。有没有办法防止这种情况发生?

2 回复 | 直到 15 年前

zombat 15 年前

这很有趣。虽然我无法解释,但我确实为你找到了解决办法。颠倒你的顺序 setHTML() 和 injectInside() 线,以及 <td> S正确插入:

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

显然,您使用的是mootools 1.11,但是,这种行为也出现在1.2中。非常奇怪!这一定与之前 slots 变量被注入,它不是DOM的一部分。设置非dom元素的innerhtml的效果可能是意外的?我希望我能解释一下。有时间的话,我得再深入一点。

theIV 15 年前

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