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]);
    });
});

看看this jsfiddle。

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

出了什么问题？

Answer 1

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

正确的代码：

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

gridster在按钮单击上添加小部件

1 个答案: