javascript - Type TypeError: $el is undefined on add_widget method call を取得するのはなぜですか?

Question

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