javascript - gridster 在按钮单击时添加小部件

Question

我正在评估用于自定义仪表板的 gridster jquery 插件，它似乎非常适合我的需求。但是有些事情我无法工作。我想在单击“添加按钮”时动态添加一个新小部件，使用库中记录的 add_widget 函数。结果是小部件似乎被添加，但随后消失，一切都回滚到初始状态。

$(function(){
    gridster = $(".gridster ul").gridster({
                widget_base_dimensions: [100, 120],
                widget_margins: [5, 5],
                draggable: {
                    handle: '.dragDiv'
                }
    }).data('gridster');   
    gridster.add_widget.apply(gridster, ['<li>new</li>', 1, 2]);

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

看看这个 jsfiddle。

正如您在示例中看到的那样，我使用相同的函数首先在一般范围内添加小部件（并且它可以工作），然后在按钮单击事件处理程序中，但它不能正常工作。

怎么了？

Answer 1

您应该禁用按钮的默认单击事件。

正确的代码：

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