未捕获的 TypeError:无法读取 Object.onLoad 处未定义的属性“setAttribute”

新手上路,请多包涵

任何想法可能导致此错误的原因是什么?

我的清单包括:

 <link rel="stylesheet" href="../../node_modules/semantic-ui/dist/semantic.min.css">
<link rel="stylesheet" href="../../node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../../node_modules/fullcalendar/dist/fullcalendar.min.css">
<script src="../../node_modules/semantic-ui/dist/semantic.min.js"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../../node_modules/moment/min/moment.min.js"></script>
<script src="../../node_modules/fullcalendar/dist/fullcalendar.min.js"></script>

HTML 元素:

 <div class="ui floating dropdown labeled search icon button" style="width: 95%; margin: 0 auto;" id="monthDrop">
    <i class="calendar icon"></i>
    <span class="text">Choose a Month</span>
    <div class="menu">
                <div class="item">January</div>
                <div class="item">February</div>
                <div class="item">March</div>
                <div class="item">April</div>
                <div class="item">May</div>
                <div class="item">June</div>
                <div class="item">July</div>
                <div class="item">August</div>
                <div class="item">September</div>
                <div class="item">October</div>
                <div class="item">November</div>
                <div class="item">December</div>
    </div>
</div>

脚本:

 $('#monthDrop').dropdown();

它可以很好地渲染所有内容,并且在加载时没有错误,当我尝试单击它时就是这样:

在此处输入图像描述

原文由 Tino 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 285
2 个回答

我们使用以下 html 遇到了同样的错误:

 <select class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" role="button" v-model="selected" aria-haspopup="true" aria-expanded="false">
    <option disabled value="">Please select one</option>
    <option class="dropdown-item" value="type1">Carrier</option>
    <option class="dropdown-item" value="type2">Shipper</option>
</select>

我们尝试从 <select> 标签中删除 data-toggle="dropdown" ;错误不再发生,下拉菜单仍然有效。不知道 为什么 会这样,但它为我们消除了错误。一定是某种冲突?无论如何,如果其他人正在寻找解决方案,此解决方法可能对他们有用。

原文由 Purple Lady 发布,翻译遵循 CC BY-SA 4.0 许可协议

我在 Bootstrap 4.x 中遇到了同样的错误,因为我的下拉菜单与我使用的下拉按钮没有相同的父项。

 <span class="project-sort-by">Sort by: <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Recent</a></span>

<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
</div>

这不起作用,因为 dropdown.js 代码使用以下代码查找菜单:

   _getMenuElement() {
    if (!this._menu) {
      const parent = Dropdown._getParentFromElement(this._element)

      if (parent) {
        this._menu = parent.querySelector(SELECTOR_MENU)
      }
    }
    return this._menu
  }

要解决此问题,请移动菜单,使其与切换按钮具有相同的父项。

 <span class="project-sort-by">Sort by:
    <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Recent</a>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</span>

原文由 petrocket 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题