AJAX：加载 HTML，CSS 链接不起作用答案

【问题标题】：AJAX: loading HTML, CSS Links not workingAJAX：加载 HTML，CSS 链接不起作用
【发布时间】：2017-05-10 12:38:01
【问题描述】：

执行一个基本的 AJAX 请求，但是当显示 HTML 时，没有 HTML 链接起作用，现在 CSS:hover 元素也起作用了。

对我做错了什么感到困惑。这是下面的代码示例。

CSS：

li:hover{ background:red; }
a{ text-decoration:none; }
a:hover{ text-decoration:underline; }

HTML (index.php)：

<script>
$(document).ready(function(){
    ajax();
});
</script>
<ul class="loadhere"></uL>

加载this.php：

<li><a href="">Example</a></li>

JS（AJAX）：

function ajax(){
$.ajax({
    type:"POST",
    url:"http://example.com/loadthis.php",
    dataType: "html" 
})
.done(function(result){
    $('ul.loadhere').html(result);      
});
}

【问题讨论】：

“结果”如何？
可能路径是相对于 example.com/loadthis.php - 所以它找不到 css 文件。您可以将路径更改为绝对路径，例如 CSS：example.com/css/style.css
如果您暂时不考虑 ajax，只需将 <li> 添加到列表中，CSS 是否适用？
提供的代码有效 - jsfiddle.net/3WBbn
正如@Andreas 所说，这应该可以工作......除非你是跨域的！

标签： jquery html css ajax post

【解决方案1】：

你需要使用ajax函数的“成功”选项，去掉 done 函数并将函数插入到 ajax 对象中的成功选项中，像这样：

function ajax(){
    $.ajax({
        type:"POST",
        url:"http://example.com/loadthis.php",
        dataType: "html" ,
        success: function(result){
            $('ul.loadhere').html(result);      
        }
    });
}

【讨论】：

stackoverflow.com/questions/8840257/…
不幸的是仍然没有运气。

【解决方案2】：

试试这个

 <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script>
        $(function(){
            ajax();
            function ajax(){
                $.get('loadthis.php', {}, function(){

                }).done(function(result){
                    $('ul.loadhere').html(result);
                });
            }
        });
    </script>

【讨论】：