将按钮静态添加到父 div

Question

定义：我正在创建一个管理实习生的项目。目前我在员工方面工作；员工可以添加/编辑/删除实习生。这些动作由 modal popups 处理。

方法：为了避免不必要的代码，我创建了一个布局模式。

<div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3><span class="glyphicon glyphicon-pencil"></span>Intern</h3>
            </div>

            <div id="myModalContent"></div>

            <div class="modal-footer">
                <button type="submit" class="btn btn-default btn-default pull-right" data-dismiss="modal">&nbsp;Cancel
                </button>

            </div>
        </div>

如您所见，布局有 CANCEL 按钮。因为每个模态都应该有取消按钮，所以最好的方法是把它放到布局中。

<div id="myModalContent"></div>

这个 myModalContent 部分由 javascript/ajax 代码填充。脚本将 部分视图 放入 myModalContent。 “保存更改”、“删除实习生”等按钮也来自部分视图。

问题： 但是 myModalContent 在另一个 div 中，取消按钮在另一个 div 中。这导致了一个问题：

编辑按钮代码：

<div class="modal-footer">
        <button type="submit" class="btn btn-default btn-default pull-right">
            <span class="glyphicon glyphicon-floppy-disk"></span> Edit Intern
        </button>
    </div>

我希望这些按钮位于同一行。据我所知（根据我的研究），我无法使用 css/html 访问父 div。

任何帮助将不胜感激。谢谢

编辑：

jquery代码在这里：

$(function () {
$.ajaxSetup({ cache: false });
$("a[data-modal]").on("click", function (e) {
    $('#myModalContent').load(this.href, function () {
        $('#myModal').modal({
            keyboard: true
        }, 'show');
        bindForm(this);
    });
    return false;
});



function bindForm(dialog) {
$('form', dialog).submit(function () {
    $('#progress').show();
    $.ajax({
        url: this.action,
        type: this.method,
        data: $(this).serialize(),
        success: function (result) {
            if (result.success) {
                $('#myModal').modal('hide');
                $('#progress').hide();
                location.reload();
            } else {
                $('#progress').hide();
                $('#myModalContent').html(result);
                bindForm();
                location.reload();
            }
        }
    });
    return false;
});

Answer 1

您可以从myModalContent 获取编辑按钮，并在使用下面的 jquery 加载部分视图后将其附加到modal-footer

else {
       $('#progress').hide();
       $('#myModalContent').html(result);
       //move button from modal content to footer
       $('div.modal-footer').append($('#myModalContent button.btn.btn-default.pull-right'));
       bindForm();
       location.reload();
   }

如果需要，请在取消按钮之前编辑按钮，然后使用 prepend() 而不是 append()