Как добиться копирования одним кликом — Clipboard?

Question

[Орк]

Никак не могу добиться копирования в буфер обмена данных из атрибута кнопки одним кликом. Копирование происходит только на втором клике. Поправьте меня, где ошибся?
Тут пример работы кода - https://jsfiddle.net/z0ddak/29fe8z9n/3/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.6.0/clipboard.min.js"></script>

// Обработка кнопки СКОПИРОВАТЬ
jQuery('.btn_copy_code').click(function() {

    var $this = $(this);

    // Получаем Ajax-ом данные и вставляем его в атрибут кнопки
    $this.attr('data-clipboard-text', 'КОД');

    // Копируем КОД в буфер
    var clipping = new Clipboard(this);
    clipping.on('success', function (e) {

        // Логируем в консоль...
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);

        e.clearSelection();
        clipping.destroy();
    });
});

Answer 1

[Elvis]

Я сделал вот так:

var copyBtn = document.querySelector('.copyBtn');
	copyBtn.addEventListener('click', function(event){
		// Выборка текста скрипта
		var script = document.querySelector('.scriptCopy');
		var range = document.createRange();
		range.selectNode(script);
		window.getSelection().addRange(range);
		try{
			// Теперь, когда мы выбрали текст, выполним команду копирования
			var successful = document.execCommand('copy');
			var msg = successful ? 'скопирован' : 'не скопирован';
			console.log('Текст был ' + msg);
		}
		catch(err){
			console.log('Ой, не могу скопировать');
		}
		// Снятие выделения
		window.getSelection().removeAllRanges();
	});

При этом есть кнопка:

<input type="button" size="60" value="Скопировать" class="copyBtn"/>

И поле, где находится то, что нужно скопировать(у меня это fieldset со span`ами):

<fieldset class="scriptCopy">
	<span id="comment1">-- Комментарий</span>
	<br><br>
	<span id="output">Вывод</span>
	<br><br>
	<span id="role1">Роль 1</span>
	<br><br>
	<span id="role2">Роль 2</span>
</fieldset>

UPD:немного не дочитал до конца, но может поможет чем то всё же. ссылка https://jsfiddle.net/jc7ddbk4/

Answer 2

[NataliaCh]

уже не актуально наверное :)
Но столкнулась с той же проблемой.
Решилось передачей уникального идентификатора кнопки копирования
var clipping = new Clipboard(уникальный id кнопки)