Clipboard.js, запускающий несколько при успешных событиях

Question

Я использую Clipboard.js в проекте, который позволяет пользователю копировать текст в буфер обмена при нажатии кнопки.

Он отлично работает, за исключением случаев, когда я обновляю список кнопок в списке, используя jQuery, он запускает несколько событий успеха. Вот пример кода, который будет воспроизвести ошибку:

$(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' 
     }); 
     }); 
    }); 
}); 

Я создал jsFiddle воспроизвести проблему: https://jsfiddle.net/jdfj52or/

1. Сначала нажмите «список загрузки» кнопку
2. Нажмите один из загруженных кнопки и вы увидите уведомление
3. Нажмите «список загрузки» снова
4. Нажмите одну из кнопок нагруженных и вы будете 2 уведомления

Повторите шаг 4, и он продолжит повторять больше уведомлений.

Это проблема с моим кодом?

Answer 1

Создатель Clipboard.js здесь.

Вы должны уничтожить предыдущий экземпляр Clipboard.js, чтобы предотвратить эту проблему.

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

Вот полный код и JSFiddle:

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