引导模式错误：“未捕获的类型错误：非法调用”

Question

我正在尝试动态渲染此 Bootstrap 模式的内容，但我不断收到此调用错误。我开始怀疑 Bootstrap 无法渲染在

${}

中包含模板文字 (

modal-body

) 的 modalBody - 如果是这样的话，我愿意接受有关如何规避此问题的建议。下面，我尝试尽可能地隔离问题：

HTML：

<!DOCTYPE html>

<head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
</head>

<body>
    <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#manageUser" data-bs-action="POST">Manage User</button>

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

<script src="./index.js"></script>

</html>

JS：

const manageRentModal = $('#manageRent');
manageRentModal.on('show.bs.modal', event => {
    const triggerType = $(event.relatedTarget).data('bs-action');
    $('#manage-rent input').val('');
    let rentData = {
        id: 0,
        value: 0,
        coverage: 0
    };
    manageRentModal.html(`
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title" id="manageRentLabel">${triggerType === 'POST' ? 'Register New User' : 'Edit User Data'}</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form>
                    <div class="modal-body">
                        <input type="hidden" id="manage-method" value="${triggerType}">
                        <input type="hidden" id="manage-id" ${triggerType === 'UPDATE' ? `name="id" value="${rentData?.id}"` : ''}>
                                <div class="form-floating mb-3">
                                    <input type="text" class="${triggerType === 'POST' ? 'form-control' : 'form-control-plaintext'}"currency" id="manage-value" name="value" required ${triggerType === 'UPDATE' ? `value="${rentData?.value}" readonly` : ''}>
                                    <label for="manage-value">Value (*)</label>
                                </div>

                                <div class="form-floating mb-3">
                                    <input type="text" class="${triggerType === 'POST' ? 'form-control' : 'form-control-plaintext'}" id="manage-coverage" name="coverage" required ${triggerType === 'UPDATE' ? `value="${rentData?.coverage}" readonly` : ''}>
                                    <label for="manage-coverage">Coverage (*)</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="dismissModalAndCancelEdit">Fechar</button>
                        <button type="${triggerType === 'POST' ? 'submit' : 'button'}" class="btn btn-primary" id="toggleModeAndSubmitRent">${triggerType === 'POST' ? 'Register' : 'Edit'}</button>
                    </div>
                </form>
            </div>
        </div>
    `);
});

对于熟悉 Bootstrap 源代码的任何人，以下是错误的更多详细信息：

未捕获的类型错误：Object.findOne 处的非法调用：

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

在 On._showElement:

    const modalBody = SelectorEngine.findOne(SELECTOR_MODAL_BODY, this._dialog)
    if (modalBody) {
      modalBody.scrollTop = 0
    }

在 modal.js:120:36:

    this._backdrop.show(() => this._showElement(relatedTarget))

在 g (index.js:226:51):

const execute = (possibleCallback, args = [], defaultValue = possibleCallback) => {
  return typeof possibleCallback === 'function' ? possibleCallback(...args) : defaultValue
}

在background.js：81：7：

    this._emulateAnimation(() => {
      execute(callback)
    })

Answer 1

我开始怀疑 Bootstrap 无法渲染其中包含模板文字 (
${}
) 的 modalBody
modal-body
"_

不，不是这样的。问题是你的模态在被调用的那一刻就完全是空的。首先，您至少需要 <div class="modal-content"></div>

。

引导模式错误：“未捕获的类型错误：非法调用”

问题描述投票：0回答：1

1个回答

最新问题

引导模式错误：“未捕获的类型错误：非法调用”

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1