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

Я пытаюсь добавить и/или удалить виджет на основе функции нажатия кнопки. Это работает, но как только функция вызывается, она делает что-то странное, когда код вызывается при любом щелчке мыши, а не только при нажатии кнопки на странице 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>

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


gridster
person Trevor    schedule 09.05.2014    source источник

Ответы (2)


arrow_upward
4
arrow_downward

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

$(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 после инициализации вашего gridster добавьте:

$(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);
});

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

person rgomesf    schedule 14.05.2014
comment
А, имеет смысл. Благодарю вас! Я смог разобраться с добавлением виджета, но все равно не мог его удалить. Это сработало отлично. Для добавления я пошел с этим: function addWidget() { var gridster = $(.gridster ul).gridster().data('gridster'); gridster.add_widget('‹li class=gs_w›HTML виджета...‹/li›', 2, 1); } - person Trevor; 19.05.2014

arrow_upward
1
arrow_downward

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

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>
person kelevra88    schedule 19.10.2015
comment
Извините, я думал, что это говорит само за себя, верхняя часть - Jquery, а нижняя - html, в простейшей форме, чтобы помочь людям :-) - person kelevra88; 20.10.2015
comment
Спасибо за дополнительную информацию. Я попытался немного украсить ваш ответ. Я надеюсь, что мое редактирование в порядке для вас. - person honk; 20.10.2015