加载Ajax页面丢失样式

Question

我已经检查了关于AJAX不加载样式的其他类似问题的答案。没有一个解决方案对我有效。

在AJAX调用中，我正在将另一个AJAX调用加载到页面上的一个元素中：

$.ajax({
        url: site_url+'/ajax/int_rooms'
    }).done(function (data) {
        $('.rooms-sides').append(data);
    }); 

我也试过$('.rooms-sides').load(site_url+'/ajax/int_rooms');

当我获取HTML并手动将其放入页面时，它的样式和外观与预期一致。当我把它粘贴到AJAX（成功加载）中时，它的格式就不再正确了。

控制台中没有错误。我正在使用Chrome（在Firefox中的结果相同）。如果我"检查元素"，加载的文件似乎正在丢失像<tr>这样的表标记，但当我在chromes开发工具中查看网络选项卡的响应时，我确实看到了返回的表标记。

我重复一遍，当我在插入所有内容的主文件中使用相同的html时，它可以完美地工作。

这个HTML被放入输出的php变量中，这就是您看到$r->name的原因。我试着把它放在HTML中，而不是php输出中，它也会产生完全相同的错误。

有问题的HTML：

<input type='hidden' id='room_name' value='$r->name'/>
    <tr>
    <td class="action"><a href="#" title="Delete"><span class="delete">Delete</span></td>
    <td class="action"><a href="#" title="Duplicate"><span class="duplicate">Duplicate</span></td>
    <td><a href="#" title="Configure">Configure</td>
    <td>
    <div class="ui-widget">
    <select id="combobox">
    <option value="">Select one...</option>
    <option value="Kitchen">Kitchen</option>
    <option value="Bedroom">Bedroom</option>
    <option value="Living Room">Living Room</option>
    <option value="Dining Room">Dining Room</option>
    <option value="Hallway">Hallway</option>
    </select>
    </div>
    </td>
    <td>$364.14</td>
    </tr>
    <script type="text/javascript">
    $("#room_name").remove();
    </script>

Answer 1

在同事的帮助下得到的。

必须移动隐藏的输入，它会破坏表中的行。

Answer 2

尝试在/ajax/int_rooms文件中应用样式。