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

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

1 个答案: