javascript - 将Button静态添加到父div

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

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

<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;
});

最佳答案

您可以使用以下jquery从myModalContent获取编辑按钮并将其添加到modal-footer中，然后将其加载到prepend()中

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();
   }

如果需要，请在取消按钮之前编辑按钮，然后使用append()代替