Question

我有一个.php文件，其中是一个div正文，其内容将使用不起作用的Jquery显示。它不显示jquery内容一个div也是他们在jquery中的annchor标签onhovering其内容一个div是一个iframe（在b.php中），使用ajax的divs内容这应该可以工作但不确定它是不是工作。两个a.php和b.php在同一个文件夹中

a.php和b.php：

a.php只会：

$("document").ready(function()
{
    $("#pcontent").html('');
    $("#pcontent").append('<div class="product"><div class="title1"><div class="title">fdfsfsd</div><div class="title">&nbsp;&nbsp;<a class="reference">sdfsf</a></div><div id="showdata"></div></div></div>');
    $("#pcontent").fadeIn(1);

    $(".reference").hover(function()
    {
        $("#showdata").css("display","block");
        $.ajax({
            url:"b.php",
            type:"GET"
        });
    });
});

<div id="pcontent"></div>

b.php：

 $("document").ready(function()
 {
    $("#pcontent").html('');
    $("#pcontent").append('<div class="product"><div class="title1"><div class="title"><b>&nbsp;&nbsp;ghgj</b></div><div class="title">&nbsp;&nbsp;hjhk</div></div></div>');
    $("#pcontent").fadeIn(1);
});

 <iframe id="pcontent" width="100px" height="10px"></iframe>

任何人都可以让我知道我错了还是有更好的方法来实现它？

Answer 1

更改：

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>

进入：

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>   
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

你的ajax应该开始工作了

Answer 2

找出悬停不起作用的原因是一项艰苦的工作。

根据jquery的api文档，.hover()需要事件'onMouseOver()的函数和'onMouseOut()'的函数。第二件事是使用.css()。根据{{3}}，该方法无法在所有浏览器中正常运行。为了进行攻击，我使用了Firefox。所以我用css类改变了它

这是我的工作示例，基于您的代码（a.php）：

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>   
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
        <style>
            .displayObject {display:block;}
            .disDisplayObject {display:none;}
        </style>
        <script>
            $("document").ready(function()
            {
                $("#pcontent").html('');
                $("#pcontent").append('<div class="product"><div class="title1"><div class="title">fdfsfsd</div><div class="title">&nbsp;&nbsp;<a class="reference" style="text-decoration:underline">sdfsf</a></div><div id="showdata" class="disDisplayObject">showData</div></div></div>');
                $(".reference").hover(
                    function()
                    {
                        $("#showdata").fadeIn(300).removeClass("disDisplayObject").addClass("displayObject");
                    }, function() {
                        $("#showdata").fadeOut(300).removeClass("displayObject").addClass("disDisplayObject");
                    }
                );
            });
        </script>
    </head>
    <body>
        <div id="pcontent"></div>
    </body>
</html>

b.php的内容说明：

使用.html()和.append()对iframe无效。我只能猜出你的意图是什么。我的理论是，您希望将b.php的内容插入到a.php的div中。如果是这样，那么你可以采用更简单的方式：

开发b.php以生成适当的html代码段，然后将此ajax响应插入文件a.php中的div。使用iframe主要是陷入困境。

jquery悬停与ajax无法正常工作

2 个答案: