Jquery replaceWith(html) 不替换元素；将其附加到结尾

Question

我有以下HTML。它是模态 window:

内部的一种形式

<div class="modal fade" id="requestModal" tabindex="-1" role="dialog" aria-labelledby="requestModalLabel">
    <div class="modal-dialog wide-modal" role="document">
        <form novalidate>
            <div class="modal-content">
            ....
            </div>
       </form>
    </div>
</div>

每当打开表单时，我都想呈现一个新版本的表单，没有任何旧的输入或错误消息。以下处理程序获取隐藏字段的数据加上表单的 HTML 我可以通过 Ajax 请求获取表单的数据以及表单的原始 HTML：

$(document).on('click', '#por-detail-tbl .dropdown-menu', e => {

    // This route will get fresh form HTML also.
    $.get(`/projects/${$(e.target).attr('project-id')}`, res => {
        $('#requestModal').replaceWith(res.html)

        ...more code here to populate hidden fields...
    })
})

我希望 $('#requestModal') 元素被替换为任何 res.html 元素（在本例中，是表单的新版本）。相反，res.html 作为文档正文中的最后一个元素被插入。旧的$('#requestModal')还在。

这是来自 res.html 的片段：

<div class="modal fade" id="requestModal" tabindex="-1" role="dialog" aria-labelledby="requestModalLabel">
    <div class="modal-dialog wide-modal" role="document">
        <form novalidate>
            <div class="modal-content">
            ...
            </div>
        </form>
     <div>
</div>

我能够在其他 Ajax 回调中成功使用此技术。知道为什么这个行为异常吗？

Answer 1

您实际上需要 jQuery 的 .html() 函数。

在您的原始代码中，replaceWith() 函数 替换了 $('#requestModal')。但是您替换的元素是由 Bootstrap 操纵以执行您期望的模态行为的元素。

所以我认为您确实希望将 div.modal-dialog 元素的内容设置为 form 及其子元素。如果您可以将 res.html 缩减为仅表单和子项，则可以将 $('#requestModal').replaceWith(res.html) 更改为 $('#requestModal').find('div.modal-dialog').html(res.html)。

Jquery replaceWith(html) 不替换元素；将其附加到结尾

Jquery replaceWith(html) not replacing element; appending it to end instead

javascript

jquery

twitter-bootstrap-3