Clipboard.js 성공 이벤트에 대해 여러 번 실행

프로젝트에서 버튼을 누를 때 텍스트를 클립 보드에 복사 할 수 있도록 Clipboard.js을 사용하고 있습니다.Clipboard.js 성공 이벤트에 대해 여러 번 실행

성공 이벤트에서 여러 번 발생하는 jQuery를 사용하여 목록의 단추 목록을 새로 고치는 경우를 제외하고는 정상적으로 작동합니다. 로드 중 하나를 눌러 https://jsfiddle.net/jdfj52or/

먼저 눌러 "로드 목록"버튼을

: 나는 문제를 재현하기 위해 jsFiddle을 만든

$(function() { 
    var data = [ 
    'Button One', 
    'Button Two', 
    'Button Three' 
]; 

var refreshButton = $('#refresh').on('click', function(e) { 
    var list = $('#buttonList'); 
    list.empty(); 

    for(i=0; i < data.length; i++) { 
     list.append('<li><button class="btn" data-clipboard-text="Copy Me">' + data[i] + '</button></li>') 
    } 

    var clipboard = new Clipboard('.btn'); 
    clipboard.on('success', function(e) { 
     var n = $('body').noty({ 
     text: 'Link copied to clipboard', 
     timeout: 1000, 
     type: 'success', 
     theme: 'metroui' 
     }); 
     }); 
    }); 
});

다음은 오류를 재현 몇 가지 예제 코드는 버튼을 누르면 알림이 표시됩니다.

"load list"를 다시 누르십시오.
로드 된 버튼 중 하나를 누르면 2 개의 알림이 표시됩니다.

4 단계를 반복하면 더 많은 알림이 반복됩니다.

내 코드에 문제가 있습니까?

출처

2017-02-14 BugHunterUK

Clipboard.js 작성자는 여기에 있습니다.

이 문제를 방지하려면 Clipboard.js의 이전 인스턴스를 파괴해야합니다.

$(function() { 
 
\t var data = [ 
 
    \t 'Button One', 
 
    'Button Two', 
 
    'Button Three' 
 
]; 
 
var clipboard; 
 

 
var refreshButton = $('#refresh').on('click', function(e) { 
 
    if (clipboard) { 
 
    \t clipboard.destroy(); 
 
    } 
 

 
\t var list = $('#buttonList'); 
 
    list.empty(); 
 
    
 
    \t for(i=0; i < data.length; i++) { 
 
    \t \t list.append('<li><button class="btn" data-clipboard-text="Copy Me">' + data[i] + '</button></li>') 
 
    \t } 
 
    
 
    clipboard = new Clipboard('.btn'); 
 
    \t clipboard.on('success', function(e) { 
 
    \t \t var n = $('body').noty({ 
 
      text: 'Link copied to clipboard', 
 
      timeout: 1000, 
 
      type: 'success', 
 
      theme: 'metroui' 
 
    \t }); 
 
\t }); 
 
    }); 
 
});

: 여기

if (clipboard) { 
 
    clipboard.destroy(); 
 
}

는 전체 코드 및 JSFiddle입니다

출처

2017-02-14 19:09:57

Clipboard.js 성공 이벤트에 대해 여러 번 실행

답변

관련 문제