Question

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 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.

Answer 1

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.