Twitter Bootstrap 使用远程页面重新填充模态

Question

我正在尝试做这样的事情： 我加载远程页面以显示联系人信息的模式，还有一个按钮可以编辑此信息，因此此按钮需要加载一个新的远程页面，该页面具有编辑联系人信息的表单。

我正在使用下面的代码来测试这个行为，测试在http://jsfiddle.net/vafleite/jf10pdcj/2/

$('[data-load-remote]').on('click', function (e) {
    e.preventDefault();
    var $this = $(this);
    var remote = $this.data('load-remote');
    if (remote) {
        $($this.data('remote-target')).load(remote);
    }
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
<button type="button" class="btn btn-primary" data-toggle="modal" data-load-remote="http://fiddle.jshell.net/vafleite/c5dLg852/3/show/" data-remote-target="#myModal" data-target="#myModal">Remote modal button</button>

<div class="modal hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">...</h3>
    </div>
    <div class="modal-body">
        <p>...</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>

以下是加载的第一个模式（将是联系人信息）：

<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
            </button>
            <button type="button" class="modal-edit-buttom"> <span data-load-remote="http://fiddle.jshell.net/vafleite/62m9h069/1/show/" data-remote-target="#myModal" data-target="#myModal" class="glyphicon glyphicon-edit" aria-hidden="true">Edit</span>
            </button>
             <h4 class="modal-title" id="myModalLabel">Header test</h4>
        </div>
        <div class="modal-body">Body test</div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

这个应该从前一个模态中加载。 注意上一个模态中的编辑按钮，这是行不通的...

<div class="modal-dialog">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <button type="button" class="modal-edit-buttom">
            <span data-load-remote="remote_modal.html" data-target="#myModal" class="glyphicon glyphicon-edit" aria-hidden="true"></span>
        </button>
        <h4 class="modal-title" id="modal-placebolder-header">Remote modal test</h4>
    </div>

    <div class="modal-body">
        <h4>Remote modal body</h4>
        <hr>
        <p>blah blah blah lorem ipsum</p>
    </div>

    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
    </div>
</div>

当我单击主页中的按钮时，第一个远程模式加载得很好，已经加载的模式有另一个按钮（模式关闭按钮附近的“编辑”），这个按钮应该加载相同结构中的另一个模式，但是它不工作。

有人知道怎么做吗？！

Answer 1

阅读 jQuery 文档后，我发现on 方法在以这种方式使用时不会触发动态加载内容的事件。

要修复它，必须使用delegated event handler。

于是我的代码变成了这样

$('#load-wrapper').on('click', '[data-load-remote]', function (e) {
    e.preventDefault();
    var $this = $(this);
    var remote = $this.data('load-remote');
    if (remote) {
        $($this.data('target')).load(remote);
    }
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css">

<div id="load-wrapper">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-load-remote="http://fiddle.jshell.net/vafleite/c5dLg852/8/show/" data-target="#myModal">Remote modal button</button>

    <div class="modal hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">...</h3>
        </div>
        <div class="modal-body">
            <p>...</p>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

可以在此处找到一个工作示例：http://jsfiddle.net/vafleite/jf10pdcj/3/