Why jQuery don't want to style piece of html inserted with Ajax into new page_问答_开发者

This is my first post, so first hallo all.

I have a little problem with Ajax and jQuery. On one page test.html i have one div with some paragraph and one img. On the index.html page i have only anchor for retrieval of that div using Ajax with jQuery. But all css(which i have set 开发者_JAVA百科for that div only using jQuery) don't work after the successfully loading of div. On the test.html all works fine(hover, animate... and all css) but on the index page none. My guess is that because of $('document').ready(function) things don't work well. Any help is more then welcome.

If the javascript that sets the style lives in test.html, that javascript code won't be executed when you load the page via ajax. (err, I think)

What you could do instead is load the div into index.html and then use a callback to apply style to the loaded div. For example:

$(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");
    });
});

EDIT: Thank you for posting your code below. I think the basics of what I said above still applies, but to be more specific, you need to move _all__ of your styling and hover code to your callback function.

Your test.html shouldn't need to reference your javascript file at all, since you're just pulling the div into your index.html page.

The ready function runs once, when the dom tree is ready.

It would be helpful to know what your ready function is doing, since you are blaming it for the problem.

One thing you may want to do is just simplify your page down, so you can just comment out some of the code that interacts with the div, and just basically make your ajax call and then fill in the div.

Then, using firebug, for firefox, you can look at what css properties are being used on that div, and you can see if there is a problem with how you select the div, as the css may not be applied.

Once you have that resolved, then add in what you had commented out, and continue to use firebug to look at the css and you can walk through the javascript, to make certain everything is working as you expect.

This is 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>

This is 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>

This is 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);
    })
  });

});

Your problem is that you're referencing the Javascript in Test.html and using $(document).ready.

When you load it with ajax, it isn't a regular load, so the ocde in myJS.js isn't being executed.

I would recommend making a separate function in myJS.js and putting all of your code into, then calling that function in document.ready and after the ajax call finishes. (You'll need to reference myJS.js in both pages)

The issues with your code are as follows:

index.html does not contain a target into which the results of the AJAX call can be loaded.
$('<div></div>') from MyJS.js should be selecting the target from Item 1 above.
The AJAX call is trying to load test2.html, whereas the filename is actually test.html.

With all of the above items fixed, the code will then look like this:

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>Index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="myJS.js"></script>
</head>
<body>
<a href="#">Load test div.</a>
<div id="target"></div>
</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>Test</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>

NB: No changes in test.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() {
    $('#target').load('test.html #testBox', function() {
      $(this).hide().appendTo('body').slideDown(1000);
    })
  });
});