Comportamento estranho da interface do usuário jQuery explodida no Internet Explorer

Question

Estou tentando mostrar uma imagem de fundo depois que um usuário clica em uma caixa. (Eu sei que sou um pouco preguiçoso no CSS)

<script type="text/javascript">
$(document).ready(function() {
        var options = {};
        $(".toggler1").click(function() {
            $("#effect1").effect("explode",options,1000);
            $(".toggler1").html("<div id='effect1b' style='float:left;width:207px;height:153px;></div>");
            return false;
        });
});
</script>

O contêiner de imagem é

<div class="toggler1">
    <div id="effect1" style="float:left;width:207px;height:153px;border:none;">
        <p>
        </p>
    </div>
</div>

A folha de estilo é simplesmente

<style type="text/css">
    #effect1b {
    background: url("2_01.jpg");
    }   
</style>

Por que isso funcionaria no Firefox, mas não no IE? Eu acho que vou ficar um pouco louco!

Answer 1

Seu HTML está malformado. Está faltando uma cotação final.

$(".toggler1").html('<div id="effect1b" style="float:left;width:207px;height:153px;"></div>');