Question

我知道这个问题是重复的，但是找不到我的问题的匹配答案。我正在使用boostrap 3.2.0，我有这个模式：

<div class="modal fade popup" id="popupSelect">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">&times;</a>
        <h4 class="modal-title">Select meal</h4>
    </div>
    <div class="modal-body-select">
        <div class="form-group">
            <label for="select" class="col-lg-2 control-label">Category</label>
            <div class="col-lg-10">
                <select name="selectCategory" class="form-control selectCategory"
                    id="selectCategory">
                    <option value="0">Select category</option>
                    <c:forEach items="${categories}" var="category">
                        <option value="${category.text}">${category.value}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
        <br>
        <div class="form-group">
            <label for="select" class="col-lg-2 control-label">Meal</label>
            <div class="col-lg-10">
                <select name="selectMeal" class="form-control idMeal" id="selectMeal">
                    <option value="0">Select meal</option>
                </select>
            </div>
        </div>
        <input type="hidden" value="-1" id="hSelectIndex"/>
    </div>

    <div class="modal-footer">
        <a href="" class="btn btn-warning buttons" data-dismiss="modal">Close</a>
        <input type="button" class="btn btn-warning buttons btnSaveChanges"
            value="Save Changes" />
    </div>
</div>

第一次加载模态时，内容是正确的。关闭模态后，每次加载的内容都是第一次选择的内容。我尝试使用以下方法删除数据内容：

 function removeModalContent(){
    $('#popupSelect').on('hidden', function () {

        $(this).removeData();

    });
}

但它不起作用！我做错了什么？ enter image description here 每次按下选择按钮，都会加载模态。每当模态被“隐藏”时我都需要清除内容。

Answer 1

我并不完全清楚您的问题是什么，但首先，在Bootstrap 3中，隐藏模态时触发的事件不是hidden，而是hidden.bs.modal （请参阅标题＆＃39;事件＆＃39;）下的Bootstrap Docs。所以这......

$('#popupSelect').on('hidden', function () {...

不会开火。将其更改为...

$('#popupSelect').on('hidden.bs.modal', function () {...

我也不清楚为什么会出现在名为＆＃39; removeModalContent＆＃39;的函数中。你真的想在加载时设置事件处理程序。在当前情况下你需要做的就是调用该函数来设置事件监听器。

就像我说的那样，不完全确定您的具体情况/问题，所以如果这没有帮助或者我遗失了某些东西让我知道，我会再看看。

Answer 2

当我使用模态时，我总是喜欢在弹出之前清除任何用户交互。我就是这样做的：

1）订阅按钮点击事件以显示模态窗口：

$("#btnSearchCustomer").click(function () {
        searchCustomers($(this));
    });

2）函数searchCustomers显示弹出窗口。

function searchCustomers(btn) {
    btn.attr("disabled", "disabled"); // disables the button to avoid loading data more than once
    clearSearchForm(); // clears any user input
    // checks if the modal has all the data loaded (to avoid loading on start)
    if (!searchForIsLoaded) {
        loadSearchForm(); // loads any necessary data from the DB using AJAX
        searchForIsLoaded = true;
    }
    $('#mdlSearchForm').modal('show'); // shows the modal window
    btn.removeAttr("disabled"); // enables the button again
}

您需要实现clearSearchForm函数来清除用户修改过的任何字段。

3）订阅模态窗口上的确定按钮并使用用户输入执行某些操作

4）隐藏模态表格

我希望它有所帮助

Bootstrap删除模式内容问题

2 个答案: