为什么jQuery replaceWith元素克隆不适用于Twitter BootStrap模态？

Question

I have a bootstrap modal whose body contains a span element. When a link is clicked, that link's data-user-name attribute is inserted into the span element inside the modal and the modal is shown. When the proceed button is clicked, a status message is inserted into the modal body. when the close button is clicked, the modal is closed, but the modal needs to return to it's original state when the page was loaded. Here is what I have so far:

<a href="#" data-username="Olivia Benson"><i class="fa fa-plus"></i></a>
<a href="#" data-username="Elliot Stabler"><i class="fa fa-plus"></i></a>
<a href="#" data-username="John Munch"><i class="fa fa-plus"></i></a>

<div class="modal fade" id="userAccess" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Grant Access to <?php echo get_the_title($_GET['id']);?></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>You are about to grant <span id="userDisplayName"></span> access to manage <span><?php echo get_the_title($_GET['id']);?>.</span></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="proceed">Proceed</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal" id="close">Close</button>
      </div>
    </div>
  </div>
</div>

(function($){
    $modalClone = $('.modal#userAccess').clone();
    $('#userAccess').on('hide.bs.modal', function(){
        $('.modal#userAccess').replaceWith($modalClone);
    });
    $('a[data-username']').on('click', function(e){
        $username = $(this).attr('data-username');
        $('.modal#userAccess span#userDisplayName').html($username);
        $('.modal #userAccess #close').on('click', function(){
            $('.modal#userAccess').modal('hide')
        $('#proceed').on('click', function(){
            $('.modal#userAccess .modal-body').html(
                $('<p></p>').html("You have granted "+$username+" access.")
        });
        e.preventDefault();
    });
})(jQuery);

The problem is that the modal is never replaced with the clone of the original. What am I doing wrong? There are no errors in console.

Here is a jsFiddle to demonstrate. Click on a link. Click proceed. The content of the modal body will change. Then close the modal and click on a different link. The status message that was inserted when the proceed button was clicked the first time will still be there. It should display the message that was displayed the first time you opened the modal, but it doesn't. The procedures might work the first time you go through them, but they won't work after that.

Answer 1

You had two problems here. First when you listen for hide.bs.modal your target was the modal that was on DOM at that moment. But later you replace with it clone, this listener doesn't know about newly added modal. To solve this you need to listen to document, because it is static and the event eventually will bubble up to it. The second problem is you only have one clone, and after replacing the old one with that clone, you don't have fresh clone, but replacing same element. That's why you need to clone cloned element itself when replacing. This way you'll always have fresh modal instance.

(function($){
    $modalClone = $('.modal#userAccess').clone();
    $(document).on('hide.bs.modal', '.modal#userAccess', function(){ // here 
          console.log($modalClone.clone())
        $('#userAccess').replaceWith($modalClone.clone()); // and here
    });
    $('a[data-username]').on('click', function(e){
        $username = $(this).attr('data-username');    
        $('.modal#userAccess span#userDisplayName').html($username);
        $('#userAccess').modal('show')
        $('.modal #userAccess #close').on('click', function(){
            $('.modal#userAccess').modal('hide')
        });
        $('#proceed').on('click', function(){
          $('.modal#userAccess .modal-body').html(
            $('<p></p>').html("You have granted "+$username+" access.")
          )
            $(this).remove()
        })
        e.preventDefault();
    });
})(jQuery);