Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Инициализировать функцию после клонирования объекта (https://javascript.ru/forum/jquery/36569-inicializirovat-funkciyu-posle-klonirovaniya-obekta.html)

spo 20.03.2013 01:10

Инициализировать функцию после клонирования объекта
 
Здравствуйте.
У меня на странице есть выпадающие списки в которых я использую плагин кастомного скроллбара.

<div class="frlist">
	<div class="ctrl">
		<a class="" href="#" title=""></a>
	</div>
	<div class="list">
		<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
		<div class="viewport">
			<div class="overview">
				<div><a class="fr-1" href="#" title="">Груша</a></div>
				<div><a class="fr-2" href="#" title="">Яблоко</a></div>
				<div><a class="fr-3" href="#" title="">Банан</a></div>
				<div><a class="fr-4" href="#" title="">Апельсин</a></div>
				<div><a class="fr-5" href="#" title="">Киви</a></div>
			</div>
		</div>
	</div>
	<input type="hidden" value="" id="frname" />
</div>


В шапке для данного объекта происходит инициализация функции

$(document).ready(function(){
	$('div.frlist').tinyscrollbar();
});


Есть кнопка, при клике на которую я клонирую div.frlist
$("a.addfrlist").on("click", function() {
	var prev = $(this).prev("div.left");
	var first = prev.find("div.list-s:first");
	var count = prev.find("div.list-s").size();
	first.clone().appendTo(prev).css("margin-top", "5px").find("input:hidden").attr("id", "pname"+(count+1));
	return false;
});


Все успешно добавляется настраницу и id нового элемента изменяется добавляя счетчик + 1, но выпадающий список у добавленных элементов не работает.

Для скрипта отвечающего за выпадающий список событие изменены click() на on("click", function() {})
$("div.list").css("visibility", "hidden");
$("div.ctrl a").on("click", function() {
	$("div.ctrl a").removeClass("open");
	if($(this).hasClass("opened")) {
		$(this).parent().next().css("visibility", "hidden");
	} else {
		$(this).parent().next().css("visibility", "visible");
	}
	$(this).toggleClass("opened");
	return false;
});
$("div.list a").on("click", function() {
	var new_cn_a = $(this).attr("class");
	var new_cn_b = $(this).text();
	$(this).parents("div.list").css("visibility", "hidden");
	$(this).parents("div.frlist").find("div.ctrl a").removeClass().addClass(new_cn_a).text(new_cn_b);
	$(this).parents("div.frlist").find("input[type='hidden']").val(new_cn_a);
	return false;
});
$("body").click(function() {
	$("div.ctrl a").removeClass("opened");
	$("div.list").css("visibility", "hidden");
});
$("div.thumb").click(function(e) {
	e.stopImmediatePropagation();
});


Списки не выпадают. Подозреваю что это изза того что новые объекты остаются неинициализированными.
Пожалуйста подскажите в чем проблема и как решить?

danik.js 20.03.2013 08:49

clone(true) пробуй.

spo 20.03.2013 14:46

Класс, спасибо! Все работает.
clone(true) плюс инициализация функции и все работает:

$("a.addprod").on("click", function() {
	var prev = $(this).prev("div.left");
	var first = prev.find("div.list-s:first");
	var count = prev.find("div.list-s").size();
	alert(count);
	first.clone(true).appendTo(prev).css("margin-top", "5px").tinyscrollbar().find("input:hidden").attr("id", "pname"+(count+1));
	return false;
});


Часовой пояс GMT +3, время: 13:56.