jquery get. i can't replace content of a div in ie with dynamically loaded html

i have a problem. just tryin to load some html in a div...everything works fine in every browser except ie.

    $('a[rel*=ajax]').click(function(e)
    {
        ajaxLink = $(this).attr('href')+"?ajax=true";
        theDiv = $(this).parents(".post");
        $.get(ajaxLink,function(data, textStatus){ $(theDiv).replaceWith(data); });
   开发者_StackOverflow });

if i try to alert(data) in the .get callback i can read some html, but when i try to "inject" it in theDiv, i get a blank page.

thanks a lot in advance :)

---

can you try live instead of click and it should work fine.

sometimes in IE the DOM might not be ready

$(a[rel*=ajax).live('click', function() {

          });

---

... but when i try to "inject" it in theDiv, i get a blank page.

You need to cancel the default action of the link; otherwise, the link will be followed. Either add return false to the end of your click handler, or add e.preventDefault(); to it. E.g., this:

$('a[rel*=ajax]').click(function(e)
{
    ajaxLink = $(this).attr('href')+"?ajax=true";
    theDiv = $(this).parents(".post");
    $.get(ajaxLink,function(data, textStatus){ $(theDiv).replaceWith(data); });
    return false; // This both prevents the default and stops bubbling
});

or

$('a[rel*=ajax]').click(function(e)
{
    ajaxLink = $(this).attr('href')+"?ajax=true";
    theDiv = $(this).parents(".post");
    $.get(ajaxLink,function(data, textStatus){ $(theDiv).replaceWith(data); });
    e.preventDefault(); // This just prevents the default, doesn't stop bubbling
});

Separately:

The quoted code is using ajaxLink and theDiv variables from the parent scope (if they're not declared anywhere, they're implicit global variables). Could it be that you're changing the value of theDiv after the shown code runs but before the ajax call completes? That would mean when the ajax call completes, it's using the new value of theDiv rather than the old one.

In any case, there doesn't seem to be any reason that code should be using variables from the parent scope, I'd recommend making them local to the function:

$('a[rel*=ajax]').click(function(e)
{
    var ajaxLink = $(this).attr('href')+"?ajax=true";
//  ^-- This is the new bit, the `var`
    var theDiv = $(this).parents(".post");
//  ^-- And this one
    $.get(ajaxLink,function(data, textStatus){ $(theDiv).replaceWith(data); });
});

As a separate issue, are you sure you want replaceWith (which will replace the parent that has the class post) rather than html (which will only replace its contents)?

There's also no reason for calling $ on theDiv again; parents already returns a jQuery object. So:

$('a[rel*=ajax]').click(function(e)
{
    var ajaxLink = $(this).attr('href')+"?ajax=true";
    var theDiv = $(this).parents(".post");
    $.get(ajaxLink,function(data, textStatus){ theDiv.replaceWith(data); });
//                                             ^-- No need for $ here
});

And finally: You might look at the load function, which loads HTML from the server and updates the content of an element with the result.

---

unfortunately there was a wich was not closed.. and ie seems to be not very flexible with this kind of problem.