Динамически добавленный виджет Gridster не может быть закрыт

0

Я добавил динамический виджет сетки с кнопкой закрытия.

gridster.add_widget('<li id="wdg_news" data-row="3" data-col="5" data-sizex="2" data-sizey="3" class="tile-orange" data-ng-hide="!news.length"> <div class="db-wid"><div class="db-title"> Newss <a href="#" class="db-ctrl"><i class="icon-close"></i></a></div><div class="db-content cus_scroll" style="height:304px;"> <div class="w-list"> <c:forEach items="${newsList}" var="news"><div><a href="/news/{{ne.id}}"  class="w-font-s f-white">${news.date} - ${news.summery}</a></div></c:forEach></div></div></div> </li>', 2, 3);        

все данные загружаются в него без каких-либо проблем, и когда я нажимаю кнопку закрытия, она переходит на экран входа в систему, вызывающий javascipt.

// Remove Grid
$(".db-ctrl").on("click", function(e) {
    e.preventDefault();

    var parentLi = $(this).parents("li");
    var eq_val = $(".gridster ul li").index(parentLi);
    gridster.remove_widget($('.gridster li').eq(eq_val));
    console.log(eq_val);
    saveGrid();
})

Это не происходит с уже созданными виджетами. Только тем, которые динамически создаются с использованием метода gridster.add_widget.

Пожалуйста, помогите в этом вопросе. Заранее спасибо.....

Теги:
jsp
gridster

1 ответ

0

Что вам нужно сделать, так это то, что вместо .on("click") вам нужно использовать .delegate("click").

.on прослушивает элементы, которые уже существуют в DOM. .delegate прослушивает элементы, которые уже существуют в DOM и добавляются в будущем (например, при динамическом добавлении виджета).

Поэтому вам просто нужно изменить обработчик кликов

$(".gridster").delegate("click", ".db-ctrl", function(e) {
    e.preventDefault();

    var parentLi = $(this).parents("li");
    var eq_val = $(".gridster ul li").index(parentLi);
    gridster.remove_widget($('.gridster li').eq(eq_val));
    console.log(eq_val);
    saveGrid();
})

Ещё вопросы

Сообщество Overcoder
Наверх
Меню