為什么jQuery replaceWith元素克隆不適用於Twitter BootStrap模態？

Question

我有一個引導程序模態，其主體包含一個span元素。 單擊鏈接后，該鏈接的data-user-name屬性將插入到模式內部的span元素中，並顯示模式。 單擊繼續按鈕后，狀態消息將插入到模態主體中。 當單擊關閉按鈕時，模態被關閉，但是模態需要在加載頁面時返回到其原始狀態。 這是我到目前為止的內容：

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

問題在於，模態永遠不會被原始模型的克隆替代。 我究竟做錯了什么？ 控制台中沒有錯誤。

這是一個jsFiddle進行演示。 點擊一個鏈接。 單擊繼續。 模態主體的內容將改變。 然后關閉模態並單擊其他鏈接。 第一次單擊“繼續”按鈕時插入的狀態消息仍然存在。 它應該顯示第一次打開模態時顯示的消息，但不會顯示。 該過程可能在您初次通過時起作用，但之后將不起作用。

Answer 1

您在這里遇到了兩個問題。 首先，當您偵聽hide.bs.modal您的目標就是當時在DOM上的模式。 但是稍后您將其替換為克隆，此偵聽器將不了解新添加的模態。 為了解決這個問題，您需要監聽文檔，因為它是靜態的，事件最終會冒泡到它。 第二個問題是您只有一個克隆，並且用該克隆替換了舊的克隆之后，您沒有新的克隆，而是替換了相同的元素。 因此，替換時需要克隆克隆的元素本身。 這樣，您將始終擁有新鮮的模態實例。

(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);