Cannot select elements with jquery after a html() load in Internet Explorer 8, Firefox works fine

I have the following code that runs in a display:none; classed: divtab1

function ToggleTab(tab_id)
{
 $('.divtab1').html('<div class="promo2">Testing</div>...more');
 $('.promo2').css("border", "1px solid gray");
}

html document:

<a href="javascript:ToggleTab(1);">try</a>

<div class="divtab"></div>

It works fine in Mozilla but not in IE. The actual data come from开发者_运维知识库 an ajax request but nothing can be selected in IE!

You're doing the jQuery a bit wrong, Instead of writing global functions and using javascript: in the href attribute, you should add an event handler to the a tag in question, try this:

$(function(){
    $('.someclass').click(function(){
        $('.divtab').html(...);
        $('.promo2').css("border", "1px solid gray");
    });
});

Then just put a class="someclass" on your <a> tag (or any tag) and you wont need to add javascript stuff in your href, in fact I would recommend against using an <a> as it is not even a link.

You do not have a <div class="divtab1"></div> in HTML.

Fix it to

<a href="javascript:void(0);" id="toggle_div">try</a>

<div class="divtab1"></div>

And try again

$(document).ready(function() {
    $('#toggle_div').click(function() {
        $('.divtab1').html('<div class="promo2">Testing</div>...more');
        $('.promo2').css("border", "1px solid gray");
    });   
});

See here http://jsfiddle.net/PhMmC/5/