jquery - 在 JQuery Append 之后关闭样式

Question

我有一个奇怪的问题，在除 Firefox 之外的所有浏览器中都会发生。当我执行 ajax 请求并将数据附加到表中时，“显示更多”按钮丢失了填充...

在第一次加载(非 ajax)时，按钮在所有浏览器中正确显示。当我单击发送请求以获取更多数据(行)的显示更多按钮时，该按钮丢失了它的底部填充。

如果我打开 Chrome 或 IE 的开发工具并单击按钮的

或标签元素，它会恢复填充。这几乎就像 DOM 需要刷新或其他东西来触发要显示的填充。

<!-- Html table -->
<div class="cont">
        <table id="table">
            <tbody>
                <tr>
                    <td>Record Data</td>
                </tr>
            </tbody>
        </table>
        <p><a id="showData"href="#">Show More</a></p>     
     </div> 

<!-- CSS -->
    #table { position: relative; width: 800px; height: 470px; overflow-y: scroll; padding: 10px;  }
    #showData { display: block; padding-top: 10px; }


 <!-- Event handler for Show more button -->
 <script type="text/javascript">
    $(function () {       
        $('#showData').click(function () {

            $.ajax({
                ...
                success: function (data) {                        
                    $('#table tbody').append(data.d.Html);
                },
            });

            return false;
        });
    });
</script>

返回数据

ajax 调用只返回一堆表格行。任何返回的 html 中都没有类或 ID。

调用返回的数据示例

<tr>
<td>some returned data 1</td>
</tr>
 <tr>
<td>some returned data 2</td>
</tr>
<tr>
<td>some returned data 3</td>
</tr>

Answer 1

尝试:

#showData {
    display: block;
    ...
}

一个你忘了关闭<p> :

<p><a id="showData" href="#">Show More</a></p> <!-- there! -->