将远程表单绑定到引导模式

Question

我在引导模式窗口中有一个可以完美运行的表单 - 结果会在表单提交时发布到窗口。此表单被硬编码到页面的 html 中。

现在我正在尝试远程加载表单。它可以很好地加载表单（将其放入模态体）。但是，现在当我单击提交时，模式消失了，整个页面都转到了表单 url。

我需要在父页面或远程 url 中定义我的绑定吗？我的想法是，在页面加载时，DOM 不知道远程表单的 id。也不确定远程 url 是否可以引用父页面上的 div。

所以看来我不同步了 - 父 DOM 无法识别表单，因为它是远程的，并且不确定远程表单是否可以绑定到父级中定义的模式。

有什么想法吗？

谢谢！

来自父页面：

<div class="modal hide fade in" id="mymodal">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button></div>
<div class="modal-body"></div>
</div>

在此处加载远程网址：

<a class="tip" data-toggle="modal" data-target="#mymodal" href="/index.php/change_delivery/change/2" rel="tooltip" title="Change Delivery Date"><i class="icon-calendar"></i></a>

来自远程 url 的表单：

<form class="form-horizontal" id="delivery_date_form" action="/change_delivery/submit_change">
....
</form>

并在远程网址/表单的末尾：

<script>
$(function() {
$('#delivery_date_form').bind('submit', function() {
    $.ajax({
        url: "change_delivery/submit_change",
        type: "POST",
        dataType: "html",
        contentType: "application/html",
        success: function(msg) {
            // this is returned value from your PHP script
            //your PHP script needs to send back JSON headers + JSON object, not new HTML document!
            // update your "message" element in the modal
            $("#modal-body").text(msg);
        }
    });
});
});
</script>

Answer 1

这就是我的做法：

$(function(){
   var $mymodal = $('#mymodal');
    $('[data-toggle=modal]').click(function() {
        $mymodal.attr('data-form-action', $(this).attr('data-remote'));
    });

    $mymodal.find('.save-button').click(function() {
        $.post($mymodal.attr('data-form-action'), function(data) {
            $mymodal.find('.modal-body').html(data);
        });
    });
});