为什么jQuery不'；I don’我不想在新页面中插入一段带有Ajax的html_Jquery_Html_Css_Ajax

为什么jQuery不'；I don’我不想在新页面中插入一段带有Ajax的html

jquery html css ajax

为什么jQuery不'；I don’我不想在新页面中插入一段带有Ajax的html,jquery,html,css,ajax,Jquery,Html,Css,Ajax,这是我的第一篇帖子，大家好我对Ajax和jQuery有点问题。在一个页面test.html上，我有一个div，其中有一些段落和一个img。在index.html页面上，我只有一个锚，用于使用Ajax和jQuery检索该div。但是在成功加载div之后，所有css（我仅使用jQuery为该div设置）都不起作用。在test.html上，所有css都可以正常工作（悬停、动画…和所有css），但在索引页上没有。我的猜测是，由于$（'document'）。ready（函数）的原因，事情不能很好地工作。

这是我的第一篇帖子，大家好

我对Ajax和jQuery有点问题。在一个页面test.html上，我有一个div，其中有一些段落和一个img。在index.html页面上，我只有一个锚，用于使用Ajax和jQuery检索该div。但是在成功加载div之后，所有css（我仅使用jQuery为该div设置）都不起作用。在test.html上，所有css都可以正常工作（悬停、动画…和所有css），但在索引页上没有。我的猜测是，由于$（'document'）。ready（函数）的原因，事情不能很好地工作。欢迎任何帮助

当dom树就绪时，ready函数运行一次

了解ready函数在做什么会很有帮助，因为您将问题归咎于它

您可能需要做的一件事是简化页面，这样您就可以注释掉一些与div交互的代码，基本上只需进行ajax调用，然后填写div

然后，使用firebug，对于firefox，您可以查看在该div上使用了哪些css属性，并且您可以查看如何选择div是否存在问题，因为可能没有应用css

一旦您解决了这个问题，然后添加您已经注释掉的内容，并继续使用firebug查看css，您可以浏览javascript，以确保一切都按预期工作。

当dom树就绪时，ready函数运行一次

了解ready函数在做什么会很有帮助，因为您将问题归咎于它

您可能需要做的一件事是简化页面，这样您就可以注释掉一些与div交互的代码，基本上只需进行ajax调用，然后填写div

然后，使用firebug，对于firefox，您可以查看在该div上使用了哪些css属性，并且您可以查看如何选择div是否存在问题，因为可能没有应用css

一旦您解决了这个问题，然后添加您已经注释掉的内容，并继续使用firebug查看css，您可以浏览javascript，以确保一切都按照您的预期工作。

如果设置样式的javascript位于test.html中，当您通过ajax加载页面时，不会执行该javascript代码。（呃，我想）

您可以改为将div加载到index.html中，然后使用回调将样式应用于加载的div。例如：

$(function() {
    // This function lives in index.html, and will be executed
    // when the document is ready
    $("#someAnchor").load("test.html #someDiv", function() {
        // This is the jQuery callback function, executing after the
        // div has been loaded via AJAX
        // We can now use jQuery to give it a css class,
        // or whatever else you wanted to do
        $("#someDiv").attr("class", "someCssClass");
    });
});

编辑：感谢您在下面发布您的代码。我认为我上面所说的基础仍然适用，但更具体地说，您需要将所有样式和悬停代码移到回调函数中

test.html根本不需要引用javascript文件，因为您只是将div拉入index.html页面。

如果设置样式的javascript存在于test.html，则通过ajax加载页面时不会执行该javascript代码。（呃，我想）

您可以改为将div加载到index.html中，然后使用回调将样式应用于加载的div。例如：

$(function() {
    // This function lives in index.html, and will be executed
    // when the document is ready
    $("#someAnchor").load("test.html #someDiv", function() {
        // This is the jQuery callback function, executing after the
        // div has been loaded via AJAX
        // We can now use jQuery to give it a css class,
        // or whatever else you wanted to do
        $("#someDiv").attr("class", "someCssClass");
    });
});

编辑：感谢您在下面发布您的代码。我认为我上面所说的基础仍然适用，但更具体地说，您需要将所有样式和悬停代码移到回调函数中

test.html根本不需要引用javascript文件，因为您只是将div拉入index.html页面。

这是index.html：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
    <script src="jquery-1.3.2.js" type="text/javascript"></script>
    <script type="text/javascript" src="myJS.js"></script>
  </head>
  <body>
    <a href="#">Load test div.</a>
</html>

这是test.html：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
    <script src="jquery-1.3.2.js" type="text/javascript"></script>
    <script type="text/javascript" src="myJS.js"></script>
  </head>
  <body>
    <div id="testBox">
      <p>Paragraph.Paragraph.Paragraph.Paragraph.Paragraph.</p>
      <img src="1.jpg" alt="pic1" />
    </div>

  </body>
</html>


段落。段落。段落。段落

这是myJS.js：

    $('document').ready(function() {
  // testing css using jQuery
  $('#testBox').css('border', 'solid 0.2em black');
  $('#testBox p').css('color', 'red');

  $('#testBox img').animate({"opacity" : .5});

  // img hover code
  $('#testBox img').hover(function() {
    $(this).animate({"opacity" : 1});
  }, function() {
    $(this).animate({"opacity" : .5});
  });

  // Ajax code
  $('a').click(function() {
    $('<div></div>').load('test2.html #testBox', function() {
      $(this).hide().appendTo('body').slideDown(1000);
    })
  });

});

$（'document'）.ready（函数（）{
//使用jQuery测试css
$（'#testBox'）.css（'border'，'solid 0.2em black'）；
$（'#testBox p'）.css（'color'，'red'）；
$（'#testBox img'）。动画（{“不透明”：.5}）；
//img悬停码
$（'#testBox img'）。悬停（函数（）{
$（this.animate（{“不透明”：1}）；
}，函数（）{
$（this.animate（{“不透明”：.5}）；
});
//Ajax代码
$（'a'）。单击（函数（）{
$（''）.load（'test2.html#testBox'，function（）{
$（this.hide（）.appendTo（'body'）.slideDown（1000）；
})
});
});

这是index.html：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
    <script src="jquery-1.3.2.js" type="text/javascript"></script>
    <script type="text/javascript" src="myJS.js"></script>
  </head>
  <body>
    <a href="#">Load test div.</a>
</html>

这是test.html：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
    <script src="jquery-1.3.2.js" type="text/javascript"></script>
    <script type="text/javascript" src="myJS.js"></script>
  </head>
  <body>
    <div id="testBox">
      <p>Paragraph.Paragraph.Paragraph.Paragraph.Paragraph.</p>
      <img src="1.jpg" alt="pic1" />
    </div>

  </body>
</html>


段落。段落。段落。段落

这是myJS.js：

    $('document').ready(function() {
  // testing css using jQuery
  $('#testBox').css('border', 'solid 0.2em black');
  $('#testBox p').css('color', 'red');

  $('#testBox img').animate({"opacity" : .5});

  // img hover code
  $('#testBox img').hover(function() {
    $(this).animate({"opacity" : 1});
  }, function() {
    $(this).animate({"opacity" : .5});
  });

  // Ajax code
  $('a').click(function() {
    $('<div></div>').load('test2.html #testBox', function() {
      $(this).hide().appendTo('body').slideDown(1000);
    })
  });

});

$（'document'）.ready（函数（）{
//使用jQuery测试css
$（'#testBox'）.css（'border'，'solid 0.2em black'）；
$（'#testBox p'）.css（'color'，'red'）；
$（'#testBox img'）。动画（{“不透明”：.5}）；
//img悬停码
$（'#testBox img'）。悬停（函数（）{
$（this.animate（{“不透明”：1}）；
}，函数（）{
$（this.animate（{“不透明”：.5}）；
});
//Ajax代码
$（'a'）。单击（函数（）{
$（''）.load（'test2.html#testBox'，function（）{
$（this.hide（）.appendTo（'body'）.slideDown（1000）；
})
});
});

您的问题是您正在Test.html中引用Javascript并使用

$（document）.ready

当您使用

ajax

加载它时，它不是常规加载，因此myJS.js中的ocde不会被执行

我建议在myJS.js中创建一个单独的函数，将所有代码放入，然后在

document.ready

中调用该函数，并在

ajax

调用完成后调用。（您需要在两个页面中都引用myJS.js）

您的问题是，您正在Test.html中引用Javascript并使用

$（document）.ready

当您使用

ajax

加载它时，它不是常规加载，因此myJS.js中的ocde不会被执行

我建议在myJS.js中创建一个单独的函数，并将