Копировать в буфер обмена не работает для сгенерированного содержимого

0

У меня есть функция Javascript, которая генерирует динамический контент, и я хочу скопировать сгенерированный адрес в буфер обмена, но код не работает. Когда я вручную запускаю функцию в консоли, она работает.

Я попытался определить переменную в самом сгенерированном контенте с помощью тега скрипта, но это тоже не сработало.

Мой код

$("#crypto-container").append(`
                    <div class="card address-card">
                    <div class="crypto-address-text" id="clipboard_address">${crypto_address}</div>
                    <img src="assets/img/copy-icon.svg" class="copy-icon">
                 
                     <div class="card-copy-success" style="opacity: 0;">
                         <span>Copied! <img class="copy-check-icon" src="assets/img/copied-check.svg"></span>
                     </div>
                 </div>
 `);

  $(document).on("click", "div.address-card", function () {
    copyToClipboard('#clipboard_address');
  });
  
  function copyToClipboard(element) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).text()).select();
    document.execCommand("copy");
    $temp.remove();
  }


  • 0
    Вы добавляете элемент с id="clipboard_address" . Вы случайно не делаете это многократно? Потому что id должны быть уникальными, а $('#clipboard_address') всегда будет соответствовать только первому элементу.
  • 0
    Нет, это уникальный идентификатор.
  • 0
    Я нашел решение, посмотрите этот ответ. stackoverflow.com/a/66120911/15205016
  • 0
    Приятно, что вы решили это, но код в вашем вопросе работает так, как задумано, поэтому проблема заключается в коде, который вы не публиковали. Что делает этот вопрос невоспроизводимым.
  • 0
    Да, это может быть файл JS длиной 300 строк. И спасибо всем за то, что уделили время просмотру моего вопроса и ответу.
Теги:
CodeFix

1 ответ

0

Ваш код работает нормально.

Протестировано здесь:

$(function() {
  function init() {
    $("#crypto-container").append('<div class="card address-card"><div class="crypto-address-text" id="clipboard_address">${crypto_address}</div><img src="assets/img/copy-icon.svg" class="copy-icon"><div class="card-copy-success" style="opacity: 0;"><span>Copied! <img class="copy-check-icon" src="assets/img/copied-check.svg"></span></div></div>');
  }

  function copyToClipboard(cnt) {
    var $temp = $("<input>").val(cnt).appendTo("body");
    console.log("Copy to Clip: " + cnt);
    $temp.select();
    document.execCommand("copy");
    $temp.remove();
  }

  $("#crypto-container").on("click", "div.address-card", function() {
    copyToClipboard($('#clipboard_address').text());
    $(".card-copy-success").css("opacity", 1).animate({
      opacity: 0
    }, 2500);
  });

  init();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="crypto-container"></div>

Поделиться
Источник
  • 0
    К сожалению, я не могу инициализировать функцию добавления в более позднее время из-за логики моего кода.
  • 0
    @ neo81040 не имеет значения, когда добавляется контент. Я был бы более конкретным, чем использование document , как видно из моего ответа.
  • 0
    Я пробовал, что твой подход не сработал. Но я решил это, теперь вы можете проверить комментарии на ссылку для ответа на решение, хотя я ценю вашу помощь. Спасибо.
  • 0
    @ neo81040 отлично. Надеюсь, вы проголосуете за ответ, если почувствуете, что это помогло.

Другие вопросы

  • Выберите элемент, необходимый в vuejs, не работает1 ответ

    Я новичок в vuejs. Я хочу сделать элемент выбора из раскрывающегося списка обязательным, я попытался добавить требуемый атрибут, как в приведенном ниже коде. <v-select :items="fournisseursByClient" ...

  • как добавить ссылки на липкую панель навигации1 ответ

    Я попытался добавить фоновое изображение для своего веб-сайта django, и это вообще не сработало. Я использую этот ответ из stackoverflow, а также ссылку на вопрос stackoverflow. Но это не сработало. А также я переношу изменения в базу данных. добавить фоновое изображение как в методе cssbackground-i...

  • Как создать html-страницу со ссылкой [закрыто]1 ответ

    Закрыто . Этот вопрос должен быть более конкретным . В настоящее время он не принимает ответы. Хотите улучшить этот вопрос? Обновите вопрос, чтобы он фокусировался только на одной проблеме, отредактировав этот пост . Закрыт в прошлом месяце . Уточните этот вопрос Как разместить видео ключи на моем...

  • Остановить воспроизведение видео YouTube при закрытии CUSTOM модального окна1 ответ

    Привет, классные Overflowers. Мне удалось реализовать красивый, простой модальный файл, который отображает видео на YouTube при нажатии на эскиз img. Моя проблема в том, что я не могу заставить видео останавливаться после закрытия модального окна. Я пробовал здесь много идей и скриптов, но многие из...

  • Оператор if в jQuery и HTML?2 ответ

    Я успешно запускаю следующий скрипт: он обновляет текст каждые 3 секунды.<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script> $(function() { window.setInterval(function() { loadNewText() }, 3000) function loadNewText...

  • Добавление ссылки на dll в Javascript1 ответ

    Может ли кто-нибудь предложить вариант добавления ссылки на DLL в Javascript. Я работаю над приложением javascript, в котором мы пытаемся получать события с сервера напрямую, без .Net / Java. Я пробовал использовать ActiveXObject, но он не поддерживается в текущих браузерах...

  • анимация скольжения с анимацией fadeIn для перехода к следующей форме1 ответ

    Я пытаюсь создать анимацию для события нажатия кнопки, чтобы сдвинуть форму, затем вызвать следующую форму, она также сдвинется вверх и вызовет следующую форму, но моя форма исчезает после одной анимации слайда и не показывает никаких форм. script.js файл есть.jQuery(document).ready(function(){ //M...

  • Как получить индекс символа, который нажат в поле ввода?2 ответ

    Есть ли способ получить индекс символа, который был нажат внутри поля ввода? Например, в поле ввода вводится значение: «abc». и я нажимаю на поле ввода конкретно на «b». Я хотел бы знать, что клик был обработан по индексу 1; Я просмотрел событие мыши, которое запускается с помощью onClick и onFocus,...

  • Как я могу проверить, является ли переменная «неопределенной» или «нулевой», не объявляя ее [дубликат]1 ответ

    На этот вопрос уже есть ответы здесь : JavaScript проверяет, существует ли переменная (определена / инициализирована) (31 ответ) Закрыт 12 дней назад . Я используюjson массив в моем внешнем файле js. Этот массив объявлен некоторыми обязательными страницами, а не всеми моими страницами. Моя проблема...

  • Функция setTimeout в jQuery не работает [дубликат]1 ответ

    На этот вопрос уже есть ответы здесь : 'setInterval' vs 'setTimeout' [дубликат] (5 ответов) Закрыт в прошлом месяце . Я пытаюсь использовать функцию установки времени, если класс существует в документе и у этого класса есть определенные атрибуты данных. Поэтому я начал кодировать оч...

CodeFix
Цитата дня

"Завидую тестировщикам: все хотят с ними дружить."

Эндрю Таненбаум