0

我绑定一个函数以通过 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); 
}
4

0 回答 0