使用Gridster添加网格时出现Javascript错误

时间:2015-03-05 04:34:59

标签: javascript jquery gridster

$(function ($) {

    var gridster;
    widget_base_width: 240;
    widget_base_height: 240;
    widget_margin_h: 10;
    widget_margin_v: 10;
    gridActive: false;

    this.gridster = $('.gridster ul').gridster({
        widget_margins         : [this.widget_margin_h, this.widget_margin_v],
        widget_base_dimensions : [this.widget_base_width, this.widget_base_height],
        helper                 : 'clone',
        draggable              : {}
    }).data('gridster');

    $(".chart-button").click(function () {
        this.gridster.add_widget('<li id="hideil"><div id="test">heloooooo</div></li>');
    });

});

我正在使用此代码使用gridster添加磁贴,但我收到错误说:

  

未捕获TypeError:无法读取未定义的属性'add_widget'(匿名函数)
  x.event.dispatch jquery-1.10.2.min.js:22
  v.handle jquery-1.10.2.min.js:22

1 个答案:

答案 0 :(得分:2)

点击处理程序的

this对象与其外的this对象不同。上下文不同:处理程序this内部对象指向$('.chart-button')。您可以在处理程序之外定义变量并使用它:

var gridster = $('.gridster ul').gridster(...).data('gridster');

$(".chart-button").click(function () {
    gridster.add_widget('<li id="hideil"><div id="test">heloooooo</div></li>');
});

或者您可以将this(覆盖处理程序的上下文)绑定到处理程序:

this.gridster = $('.gridster ul').gridster(...).data('gridster');

$(".chart-button").click(function () {
    gridster.add_widget('<li id="hideil"><div id="test">heloooooo</div></li>');
}.bind(this));