Javascript 为什么jQuery replaceWith element clone不能使用Twitter引导模式？

我有一个引导模式，它的主体包含一个span元素。单击链接时，该链接的“数据用户名”属性将插入到模态内部的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);

授予访问权限
&时代；
您将要授予对管理的访问权限

继续
接近
（函数（$）{
$modalClone=$（'.modal#userAccess'）.clone（）；
$（'#userAccess'）.on（'hide.bs.modal'，function（）{
$（'.modal#userAccess'）。替换为（$modalClone）；
});
$（'a[数据用户名']'）。在（'click'，函数（e）{
$username=$（this.attr（'data-username'）；
$（'.modal#userAccess span#userDisplayName'）.html（$username）；
$（'.modal#userAccess#close'）。on（'click'，function（）{
$（'.modal#userAccess'）.modal（'hide'））
$（“#继续”）。在（'click'，function（）上{
$（'.modal#userAccess.modal body'）.html(
$（“
”）.html（“您已授予“+$username+”访问权限。”）
});
e、 预防默认值（）；
});
})（jQuery）；

问题是模态从来没有被替换为原始的克隆。我做错了什么？console中没有错误

---

这是一个要演示的链接。单击链接。单击继续。模式正文的内容将更改。然后关闭模式并单击其他链接。第一次单击继续按钮时插入的状态消息仍将存在。它应显示第一次打开moda时显示的消息l、 但事实并非如此。第一次执行这些过程时，这些过程可能会起作用，但之后就不起作用了。

您在这里遇到了两个问题。首先，当您侦听

hide.bs.modal时，您的目标是当时DOM上的modal。但是，稍后您将其替换为克隆，此侦听器不知道新添加的modal.To解决此问题您需要侦听文档，因为它是静态的，事件最终将冒泡到它。第二个问题是您只有一个克隆，在用该克隆替换旧的克隆后，您没有新的克隆，而是替换同一个元素。这就是为什么在替换时需要克隆克隆的元素本身。这样您就可以有新的模态实例

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

（函数（$）{
$modalClone=$（'.modal#userAccess'）.clone（）；
$（document）.on（'hide.bs.modal'，'.modal#userAccess'，function（）{//here
console.log（$modalClone.clone（））
$（'#userAccess'）.replaceWith（$modalClone.clone（））；//这里
});
$（'a[数据用户名]）。在（'click'，函数（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'））
});
$（“#继续”）。在（'click'，function（）上{
$（'.modal#userAccess.modal body'）.html(
$（“
”）.html（“您已授予“+$username+”访问权限。”）
)
$（this.remove（））
})
e、 预防默认值（）；
});
})（jQuery）；