javascript - Bootbox.js模态禁用脚本

我对Tag It有问题！插入。我想打开一个包含两个文本区域的引导箱模式-一个用于Notes，另一个用于标记人员。事实是，它在页面上运行良好（最后我将隐藏“ itemNotesDiv”并仅允许其以模态显示），但它不能以模态运行。如何在Bootbox模式下启用脚本？

<div id="itemNotesDiv">
    <form class="js-exampleForm">
        <h4>Notatki</h4>
        <hr />
        <div class="form-group">
            @Html.Label("Notatki", htmlAttributes: new { @class = "control-label col-md-4" })
            <div class="col-md-10">
                @Html.TextArea("itemNotes", null, new { @class = "form-control" })
            </div>
        </div>
        <div class="form-group">
            @Html.Label("Otaguj osoby", htmlAttributes: new { @class = "control-label col-md-4" })
            <div class="col-md-10">
                <ul id="taggedPersons"></ul>
            </div>
        </div>
    </form>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#taggedPersons").tagit( {
            availableTags: @Html.Raw(Json.Encode(@ViewBag.Users)),
            allowDuplicates: false,
            allowSpaces: true,
        });
    });

    $('#activeItemsTable tbody').on('click', "a[name='itemNotes']", function (){
        var bootboxHtml = $('#itemNotesDiv').html()
            .replace('js-exampleForm', 'js-bootboxForm')
            .replace('itemNotes', notes);

    bootbox.confirm(bootboxHtml, function (result) {
        if (result) {
            /// code ///
        }
    });
});

</script>

最佳答案

编辑：虽然我在下面提供了一个有关模态显示后触发事件的示例，但我刚刚意识到您正在使用相同的ID来复制DOM中的元素-就我所知，这意味着jquery选择器将仅返回<ul id="taggedPersons"></ul>的第一个实例，因此您的标签将仅在DOM中的第一个实例上起作用-您的重复副本未绑定到您要传入的HTML，而是复制到其下方。

您可以在调用tag it函数之前在这里做几件事；


删除原始DOM元素，这样就不会发生冲突
使用更具体的选择器排除原稿
遍历两个对象，并在隐藏原始对象的同时调用两个对象。




我不熟悉Tag It！具体来说，但我们在项目中广泛使用Bo​​otBox模式。

您的脚本尚未在Bootbox模式中被“禁用”，它们已经运行。

查看您的实现，您需要在调用bootbox后调用.tagit()进行加载，因为在调用.tagit()函数之后创建新的DOM元素时。

但是，如果使用局部视图，并通过ajax调用将HTML内容和关联的JS加载到模式中，则会触发$(document).ready()函数。

这与我通常对这种情况使用部分视图的方式有很大不同，但是应该足够了。

这整个代码段都应该放在您的click事件中。

var bootboxHtml = $('#itemNotesDiv').html()
var x = bootbox.confirm({
    message: bootboxHtml,
    callback: function (result) {
        // closure callback
    }
});

x.on("shown.bs.modal", function () {
    alert("call your function here...");

    $("#taggedPersons").tagit({
        availableTags: @Html.Raw(Json.Encode(@ViewBag.Users)),
        allowDuplicates: false,
        allowSpaces: true,
    });
});