Twitter Bootstrap repopulate modal с удаленной страницей

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>

И этот должен быть загружен изнутри предыдущего модального. Обратите внимание на кнопку Edit в предыдущем модальный, это то, что не работает ...

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