Javascript-форум - метод hmtl() удалят исходное содержимое

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - метод hmtl() удалят исходное содержимое (https://javascript.ru/forum/jquery/21315-metod-hmtl-udalyat-iskhodnoe-soderzhimoe.html)

метод hmtl() удалят исходное содержимое

Здравствуйте, помогите исправить ошибку.
Обработчик берет div блок, у которого display: none, и вставлять его в другой div блок (у которого настроены стили, и который находится в нужном мне месте). Так вот после первого клика все получается нормально. Но метод html() удаляет исходное содержимое и при втором клике уже ничего нет.(так как содержимое удалено)
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');;
 
}

Подскажите как сделать, чтобы не удалял.

Не помогло.

elem.html(elem.html()+newHtml);

Цитата:

Сообщение от walik

elem.html(elem.html()+newHtml);

elem.append(newHtml) тогда уж так, наверно?

Serg_pnz, это вообще не то.

walik, не очень понятно зачем. Мне надо обновлять содержимое блока <div id="cn-menu-light-block"> содержимым блока <div class="cn-menu-object">

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

Надо в data помещать html код а не ссылку на выборку дочерних обьектов.
вместо

var data = $('div', this).children();

писать

var data = $('div', this).html();

У тебя получалось так

1) Пользователь кликал по первой ссылке, при этом содержимое перемещалось из контейнера this, в твой лайт бокс.
2) Пользователь кликал по другой ссылке, и снова делалось перемещение уже из второго контейнера.
3) Пользователь снова кликал по первой ссылке, программа снова пытался сделать перемещение из контейнера this, но не тут-то было, ты ведь переместил его содержимое уже на шаге 1, и контейнер пуст, а то что ты переместил на первом шаге пользователь уже давно затёр на втором. короче html($(' селектор')) - перемещает, а не копирует.

function showLightBlock(eventObj)
{
	var block = $('div:#cn-menu-light-overlay div#cn-menu-light-block');
	//var data = $('div', this).children();                                           // неправильная строка
	var data = $('div', this).html();                                                  // правильная строка
	
	block.html(data);
	setCssLightBlock(block);
}

ОФФТОП!

Если ты собрался делать сайт без серверных скриптов, то может как минимум есть смысл вынести меню блюд в отдельный файл, к примеру в файл в формате json - так будет проще редактировать меню и кроме того при необходимости можно дописать админку, не изменяя клиента.
как вариант.
1)Скрипт при загрузке страницы сделает запрос к серверу с целью получения файла с блюдами
2) превращаем результат запроса в массив при помощи Json.parse
3) Скрипт в цикле переберает массив и заполняет меню блюд

просто когда блюд будет под сотню, редактировать html будет вообще не прикольно.

УРААА! Огромное спасибо. :)

PS: Блюда будут браться из mysql.