我绑定一个函数以通过 jQuery 将小部件添加到按钮:
$('#slide_out_bar button').click(function(){
test();
});
function test(){
gridster.add_widget("<li><h1>Test</h1></li>");
}
当我单击按钮test()
被调用但我得到错误:Type TypeError: $el is undefined
,打印在控制台中并且没有小部件被添加到gridster
元素中。
但是,如果我只是test()
从 HTML 文件中的脚本标记调用它就可以正常工作。
<script type="text/javascript">
test();
</script>
我真的不明白为什么会发生这种情况,有人有什么想法吗?
我的代码当然比这更多,但我认为这些是最相关的部分。如果您认为我的代码的其他部分可能会以某种方式影响gridster
我会发布更多。
编辑:这是我所有的 javascript 代码。
var gridster;
function initiate_gridster(){
$(".gridster ul").gridster({
max_cols: 4,
max_rows: 3,
min_cols: 4,
widget_margins: [6, 6],
widget_base_dimensions: [300, 300]
});
gridster = $(".gridster ul").gridster().data('gridster');
gridster.$el.on('click', '.delete',function(event){
remove_widget($(this));
});
return gridster;
}
function remove_widget(widget_elem){
var widget = widget_elem.parents('li');
var data_id = widget[0].attributes['data-id']
if(data_id == null){
console.log("Cannot remove widget. Widget lacks 'data-id' attribute.");
return;
}
var id = data_id.value
var res = gridster.remove_widget(widget);
$.post('remove_widget',{data_id: id}, function(data){
console.log("Removed widget: " + id + "=" + data.message);
});
}
function test(){
console.log("TEST");
var grid = initiate_gridster();
grid.add_widget("<li data-id='1'><div class='delete'>|||<div><h1 id='test' >Test</h1></li>",1,1);
}