jquery Uncaught TypeError：Illegal invocation：selector-engine.js：41

x7rlezfr 于 2024-01-07 发布在 jQuery

关注(0)|答案(1)|浏览(180)

我最近升级了我的ASP.NETMVC应用程序到最新的bootstrap和jQuery版本。
错误截图：
https://i.stack.imgur.com/coAjF.png
模态甚至不加载。
这是我使用的代码：

<a id="btnOpenWidget" class="dropdown-item" 
   href="#" data-bs-target="#divAddCustomWidgetModal" 
   data-bs-toggle="modal" data-backdrop="static" 
   data-url="@Url.Action(Actions._AddWidget, Controllers.Home, new { Area = string.Empty })">
    <span class="glyphicon glyphicon-cog"></span>Open Widget
</a>

<div class="modal fade" id="divAddCustomWidgetModal" tabindex="-1" aria-hidden="true">
    <div class="modal-body"></div>
</div>

$(document).ready(function () {
    $('a[data-bs-target="#divAddCustomWidgetModal"]').click(function () {
        var url = $(this).data('url');
        console.log(url);
        $('#divAddCustomWidgetModal .modal-body').load(url);
    });
});

我尝试了所有的方法，但仍然不起作用。早些时候，模态div在其他地方，我甚至将其作为脚本移动到当前的cshtml中，但没有运气

jquery

来源：https://stackoverflow.com/questions/77619614/uncaught-typeerror-illegal-invocation-selector-engine-js41

1条答案

按热度按时间

xe55xuns1#

在模态元素上必须有.modal-dialog和.modal-body类，因此将.modal-dialog父容器添加到.modal-body：

<div class="modal fade" id="divAddCustomWidgetModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-body"></div>
  </div>
</div>

字符串
由于没有对话框容器，这里可能会出错：

const modalBody = SelectorEngine.findOne(SELECTOR_MODAL_BODY, this._dialog)

型
https://github.com/twbs/bootstrap/blob/main/js/src/modal.js#L181

findOne(selector, element = document.documentElement) {
     return Element.prototype.querySelector.call(element, selector)
 }

型
https://github.com/twbs/bootstrap/blob/main/js/src/dom/selector-engine.js#L41
演示：

$(document).ready(function () {
    $('a[data-bs-target="#divAddCustomWidgetModal"]').click(function () {
        var url = $(this).data('url');
        console.log(url);
        //$('#divAddCustomWidgetModal .modal-body').load(url);
         $('#divAddCustomWidgetModal .modal-body').load('https://placehold.co/400x200');
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<a id="btnOpenWidget" class="dropdown-item" href="#" data-bs-target="#divAddCustomWidgetModal" data-bs-toggle="modal" data-bs-backdrop="static" data-url="@Url.Action(Actions._AddWidget, Controllers.Home, new { Area = string.Empty })">
  <span class="glyphicon glyphicon-cog"></span>Open Widget
</a>
<div class="modal fade" id="divAddCustomWidgetModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-body"></div>
  </div>
</div>

展开查看全部

赞(0）回复(0）举报 2024-01-07

我来回答

jquery Uncaught TypeError：Illegal invocation：selector-engine.js：41

1条答案

相关问题

热门标签

最新问答