Здравствуйте.
У меня на странице есть выпадающие списки в которых я использую плагин кастомного скроллбара.
<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();
});
Списки не выпадают. Подозреваю что это изза того что новые объекты остаются неинициализированными.
Пожалуйста подскажите в чем проблема и как решить?