使用Gridstack添加Widget时调用事件报错：e.getAttribute不是函数

错误原因 #

错误Uncaught TypeError: e.getAttribute is not a function的核心问题是：你调用grid.addWidget()时传入的是jQuery对象，而GridStack的addWidget方法要求传入原生DOM元素。jQuery对象是对DOM元素的封装，本身没有getAttribute方法，因此触发了这个报错。

解决办法 #

将jQuery对象转换为原生DOM元素即可，常用两种方式：

• 在jQuery对象后添加[0]，直接获取封装的第一个原生DOM节点
• 使用jQuery的.get(0)方法提取原生DOM元素

修改后的关键代码 #

调整addWidget函数如下：

function addWidget(content) {
  var gridStackItem = $('<div>').html(content);
  // 转换为原生DOM元素后传入
  grid.addWidget(gridStackItem[0]);
}

完整修改后的代码 #

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="node_modules/gridstack/dist/gridstack.min.css" />
</head>
<body>
  <div class="grid-stack">
    <!-- Your widgets will be added here -->
  </div>

  <button id="add-widget-btn">Add Widget</button>

  <!-- Pop-up container -->
  <div id="popup-container" style="display: none;">
    <h3>Select a Widget:</h3>
    <button class="widget-selector" data-widget-type="chart">Chart</button>
    <button class="widget-selector" data-widget-type="table">Table</button>
    <button class="widget-selector" data-widget-type="image">Image</button>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
  <script src="node_modules/gridstack/dist/gridstack-all.js"></script>
  <script>
    $(function () {
      var grid = GridStack.init();

      $('#add-widget-btn').click(function () {
        $('#popup-container').show();
      });

      $('.widget-selector').click(function () {
        var widgetType = $(this).data('widget-type');
        var widgetContent = getWidgetContent(widgetType);
        addWidget(widgetContent);
        $('#popup-container').hide();
      });

      function getWidgetContent(widgetType) {
       
        if (widgetType === 'chart') {
          return '<div class="grid-stack-item" data-gs-width="4" data-gs-height="4">Chart Widget Content</div>';
        } else if (widgetType === 'table') {
          return '<div class="grid-stack-item" data-gs-width="6" data-gs-height="4">Table Widget Content</div>';
        } else if (widgetType === 'image') {
          return '<div class="grid-stack-item" data-gs-width="2" data-gs-height="4">Image Widget Content</div>';
        }
      }

      function addWidget(content) {
        var gridStackItem = $('<div>').html(content);
        // 转换为原生DOM元素
        grid.addWidget(gridStackItem[0]);
      }
    });
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Zerotoinfinity