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/