jQuery - помогите написать обработчик

[oke11o]

Здравствуйте. Помогите исправить ошибку.

Обработчик берет div блок, у которого display: none, и вставлять его в другой div блок (у которого настроены стили, и который находится в нужном мне месте). Так вот после первого клика все получается нормально. При втором клике ничего не отображается. Как будто опять свойство display: none.

HTML:

<div id="cn-menu-light-overlay">
    <div id="cn-menu-light-block">
    </div>
</div>
<div class="test-link">
    <h4>закуска</h4>
    <div class="cn-menu-object" style="display: none;">
        <h4>чтобы это могло быть?</h4>
        <img src="images/menu_object.jpg"></img>
        <ul>
            <li><span>Цена:</span>300 руб</li>
            <li><span>Порция:</span>300 г</li>
            <li><span>Калории:</span>300 кал</li>
            <li><span>Состав:</span>Мука, вода, рис, курица, яйцо, сахар, специи. Все переммешать и выкинуть.</li>
        </ul>
    </div>
</div>

CSS:

#cn-menu-light-overlay img { border: none; }
#cn-menu-light-overlay {        display: none;  
                                                position: absolute;
                                                top : 0;
                                                left : 0;
                                                z-index : 90;
                                                height : 1500px;
                                                width : 100%;
                                                background-image: url(../i/overlay.png); 
                                                }
* html #cn-menu-light-overlay{
        background-color: #333;
        back\ground-color: transparent;
        background-image: url(blank.gif);
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../i/overlay", sizingMethod="scale");
        }

#cn-menu-light-block {          
                                                position: absolute;
                                                top : 100px;
                                                left : 480px;
                                                z-index : 100;
                                                height : 400px;
                                                width : 400px;
                                                background-color: #FFF; 
                                                }
.test-link:hover { cursor: pointer;}

JS:

$(document).ready(function(){
                $('div:.test-link').bind('click', showLightBlock);
                $('div:#cn-menu-light-overlay').bind('click', hideLightBlock);
        });

function showLightBlock(eventObj)
{
        var block = $('div:#cn-menu-light-overlay div#cn-menu-light-block');
        var d = $('div', this).children();
        block.html(d);
        block.find('div').css('display', 'block');;
        block.css('display', 'block');;
        $('div:#cn-menu-light-overlay').css('display', 'block');
}

function hideLightBlock()
{
        $('div:#cn-menu-light-overlay').css('display', 'none');;

}

Edited September 5, 2011 by oke11o

[Great Rash]

А что за двоеточие тут?

$('div:.test-link').bind('click', showLightBlock);

[oke11o]

Это фильтр.

[sigma77]

oke11o,

Попробуй вешать на live()

[oke11o]

Не помогает. Там почему-то строчка

block.html(d);

удаляет элементы из исходного места. А мне этого не надо.

[Golgi]

oke11o, метод html полностью заменяет содержимое, выбранного элемента.

Если не нужно удаление, то попробуй так

var i_html = block.html();

block.html(i_html+d);

[oke11o]

Golgi, нет это не то. Мне не важно содержимое блок. (оно то как раз и должне быть полностью заменено новым). У меня удаляется вот это содержимое ($('div', this).children()).

var d = $('div', this).children();
 block.html(d);

[oke11o]

ребят, ну подскажите.

Вот вся страничка: http://ifolder.ru/25567538

[sigma77]

Как-то так - http://jsfiddle.net/GJBvR/

[oke11o]

Спасибо, большое. Очень выручил.

[Golgi]

oke11o, это Она