Добавить / удалить отдельные виджеты из гридстера

Я пытаюсь добавить и удалить виджет на основе функции нажатия кнопки. Это работает, но как только функция вызывается, когда она делает что-то странное, когда код вызывается при любом щелчке мышью, а не просто нажатием кнопки на HTML-странице. Поэтому, если я нажму кнопку удаления на html-странице, он удалит этот виджет, но затем, если я нажму любой другой виджет (кроме кнопки), он все равно удалит этот виджет. Я хочу, чтобы функция вызывалась только при нажатии кнопки html, а не при щелчке мышью. Это как кнопка инициализирует что-то на странице, чтобы любой щелчок мыши вызывал функцию удаления. Кто-нибудь может объяснить, почему это происходит и как я могу это исправить? Мой код ниже:

function deleteWidget() {
    var gridster = $('.gridster ul').gridster().data('gridster');
    $(document).on( "click", ".gridster ul li", function() {
        $(this).addClass("activ");
        gridster.remove_widget($('.activ'));
    });
    }

    function addWidget() {
    var gridster = $(".gridster ul").gridster().data('gridster');
    $(document).on("click", ".gridster ul li", function() {      
        gridster.add_widget('<li class="gs_w">The HTML of the widget...</li>', 2, 1);
    });
    }

<li data-row="1" data-col="4" data-sizex="1" data-sizey="1" class="gs_w"><button onclick="addWidget()" style="float: right;">+</button><h3>4</h3><span class="gs-resize-handle gs-resize-handle-both"></span></li>
<li data-row="1" data-col="6" data-sizex="1" data-sizey="1" class="gs_w"><button onclick="deleteWidget()"style="float: right;">-</button><h3>6</h3></li>

Спасибо за любую помощь!

Источник

2 ответа

Решение

Когда вы нажимаете на кнопку удаления, ваш код создает привязку, которая делает любой щелчок по любому виджету, запустите код, чтобы удалить его.

$(document).on( "click", ".gridster ul li", function() {
        $(this).addClass("activ");
        gridster.remove_widget($('.activ'));
    });

Вы можете попробовать изменить свой HTML-код на:

<li data-row="1" data-col="4" data-sizex="1" data-sizey="1" class="gs_w"><button class="delete-button" style="float: right;">+</button><h3>4</h3><span class="gs-resize-handle gs-resize-handle-both"></span></li>
<li data-row="1" data-col="6" data-sizex="1" data-sizey="1" class="gs_w"><button class="add-button" style="float: right;">-</button><h3>6</h3></li>

и, в вашем коде javascript, после инициализации вашего гридстера добавьте:

$(document).on( "click", ".gridster .delete-button", function() {
    var gridster = $(".gridster ul").gridster().data('gridster');
    gridster.remove_widget($(this).parent());
});

$(document).on("click", ".gridster .add-button", function() {
    var gridster = $(".gridster ul").gridster().data('gridster');      
    gridster.add_widget('<li class="gs_w">The HTML of the widget...</li>', 2, 1);
});

Надеюсь, поможет.

Источник

Ниже приведены jQuery и HTML, необходимые для добавления виджета в сетку гридстера.

JQuery:

$(document).on( "click", "#addWidgetButton", function(e) {
    e.preventDefault(); 
    gridster.add_widget.apply(gridster, ['<li>new</li>', 1, 2]);
});

HTML:

<button id="addWidgetButton" style="float: right;">+</button>
Источник
Другие вопросы по тегам