Question

我试图做这样的事情：我加载远程页面以显示联系人信息的模式，还有一个按钮，可以编辑此信息，因此此按钮需要加载一个新的远程页面，其中包含一个用于编辑联系信息的表单。

我使用以下代码测试此行为，测试位于http://jsfiddle.net/vafleite/jf10pdcj/2/

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

＆＃13;

<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>

＆＃13;

这个应该从前一个模态中加载。 请注意上一个模式中的“编辑”按钮，这是不起作用的......

＆＃13;

<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>

＆＃13;

当我单击主页面中的按钮时，第一个远程模态加载得很好，已加载的模态有另一个按钮（＆＃39;编辑＆＃39;靠近模态关闭按钮），此按钮应加载另一个模态相同的结构，但它不起作用。

有人知道如何做到这一点吗？！

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/

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

1 个答案: