Question

我有一个用于将内容复制到剪贴板的按钮列表（使用clipboard.js）。当单击其中一个按钮时，我使用jQuery创建一个旁边的元素，该元素扩展为让用户知道它已成功复制到剪贴板。我有这个功能工作，但我试图删除元素一旦进入和退出，但到目前为止都没有成功。

使用.delay(2000).remove();不起作用，因为我相信.delay()仅适用于动画。给元素一个类并使用setTimeout()确实有效，但是当点击多个按钮时，它会同时删除所有不应发生的元素 - 它们应该全部显示2秒然后关闭。

这是主要代码 - 使用js创建按钮，这就是使用.live()的原因。我不确定我提供的代码片段中缺少什么，但它适用于我的localhost（创建元素并为其设置动画） - 元素需要在动画后删除。（使用Bootstrap进行样式化）

$(function() {
  new Clipboard('.btn-copy');
  
  $('button.btn-copy').live('click', function() {
    $(this).after($('<span/>').css({
        'overflow': 'hidden',
        'position': 'absolute',
        'transform': 'translate(-100%, -7px)',
        'width': '0',
        'color': '#fff',
        'background-color': '#5cb85c',
        'border': '1px solid #4cae4c',
        'border-radius': '4px',
        'padding': '7px 0px',
        'vertical-align': 'middle',
        '-webkit-user-select': 'none',
        '-moz-user-select': 'none',
        '-ms-user-select': 'none',
        'user-select': 'none'
      }).text('Link copied to clipboard').animate({
        'width': '180',
        'padding': '7px 12px'
      }, 200).delay(1000).animate({
        'width': '0',
        'padding': '7px 0px'
      }, 200)
      // .delay(2000).remove() // Remove <span/> element here
    );
  });
});

table {
  width: 100%;
}
.btn {
  color: white;
  background-color: #5cb85c;
  border: 1px solid #4cae4c;
  border-radius: 4px;
  padding: 7px 12px;
  vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <td>1...</td>
    <td>
      <button data-clipboard-text="..." class="btn-copy btn btn-success">Copy</button>
    </td>
  </tr>
  <tr>
    <td>2...</td>
    <td>
      <button data-clipboard-text="..." class="btn-copy btn btn-success">Copy</button>
    </td>
  </tr>
  <tr>
    <td>3...</td>
    <td>
      <button data-clipboard-text="..." class="btn-copy btn btn-success">Copy</button>
    </td>
  </tr>
</table>

Answer 1

在动画成功回调中执行此操作，并使用setTimeOut()方法提供延迟。虽然最好使用on()而不是live()来绑定事件处理程序，因为它在jQuery 1.7版本中已被弃用。

.animate({
  'width': '0',
  'padding': '7px 0px'
}, 200, function() {
  setTimeout(function() {
    $ele.remove();
  }, 2000)
})

$(function() {
  // new Clipboard('.btn-copy');
  $('button.btn-copy').on('click', function() {
    var $ele = $('<span/>').css({
      'overflow': 'hidden',
      'position': 'absolute',
      'transform': 'translate(-100%, -7px)',
      'width': '0',
      'color': '#fff',
      'background-color': '#5cb85c',
      'border': '1px solid #4cae4c',
      'border-radius': '4px',
      'padding': '7px 0px',
      'vertical-align': 'middle',
      '-webkit-user-select': 'none',
      '-moz-user-select': 'none',
      '-ms-user-select': 'none',
      'user-select': 'none'
    }).text('Link copied to clipboard');
    $(this).after(
      $ele
      .animate({
        'width': '180',
        'padding': '7px 12px'
      }, 200)
      .delay(1000)
      .animate({
        'width': '0',
        'padding': '7px 0px'
      }, 200, function() {
        setTimeout(function() {
          $ele.remove();
        }, 2000)
      })
      .delay(2000)
      //			.remove() // Remove <span/> element here
    );
  });
});

table {
  width: 100%;
}
.btn {
  color: white;
  background-color: #5cb85c;
  border: 1px solid #4cae4c;
  border-radius: 4px;
  padding: 7px 12px;
  vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <td>1...</td>
    <td>
      <button data-clipboard-text="..." class="btn-copy btn btn-success">Copy</button>
    </td>
  </tr>
  <tr>
    <td>2...</td>
    <td>
      <button data-clipboard-text="..." class="btn-copy btn btn-success">Copy</button>
    </td>
  </tr>
  <tr>
    <td>3...</td>
    <td>
      <button data-clipboard-text="..." class="btn-copy btn btn-success">Copy</button>
    </td>
  </tr>
</table>

Answer 2

试试这个

$(function(){
    new Clipboard('.btn-copy');
    $(document).on('click', 'button.btn-copy', function(){
        var elem = btn.after($('<span/>').css({
            'overflow': 'hidden',
            'position':'absolute',
            'transform':'translate(-100%, -7px)',
            'width': '0',
            'color':'#fff',
            'background-color':'#5cb85c',
            'border':'1px solid #4cae4c',
            'border-radius': '4px',
            'padding': '7px 0px',
            'vertical-align': 'middle',
            '-webkit-user-select': 'none',
               '-moz-user-select': 'none',
                '-ms-user-select': 'none',
                    'user-select': 'none'
        })
        .text('Link copied to clipboard')
        .animate({'width':'180', 'padding':'7px 12px'}, 200, function(){
            setTimeout(function(){
                elem.animate({'width':'0', 'padding':'7px 0px'}, 200, function(){
                    setTimeout(function(){
                        elem.animate({'width':'0', 'padding':'7px 0px'}, 200);
                    }, 1000);
                })
            }, 1000);
        });
    });
 });

jQuery延迟删除元素

2 个答案: