скопировать в буфер обмена, используя jquery и jquery .copy-to-clipboard. js issue - PullRequest
Новая
       54

скопировать в буфер обмена, используя jquery и jquery .copy-to-clipboard. js issue

0 голосов
/ 13 июля 2020

Я использую сценарий jQuery (копирование в буфер обмена. js), чтобы скопировать текст в буфер обмена, а затем вставить его в другое место.

Страница, содержащая строки, которые мне нужно скопировать, загружается из базы данных.
Скрипт хорошо работает даже после удаления некоторых строк из базы данных и удаления их со страницы с помощью вызовов Ajax.

Он перестает работать, когда я динамически добавляю новую строку на страницу с помощью вызова Ajax.

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

Это мой jQuery код: 

<script>
  $(document).ready(function(){
    $('.a_copy_img').click(function(){
        $(this).parents('#tlist > tr:first').find('td.text').CopyToClipboard();
      });
  });
</script>

Это та часть страницы, которая изначально показывает таблицу со строками (и она работает на first): 

<div class="my-2">
            <table class="table">
              <thead class="bg-light">
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">Immagine</th>
                  <th scope="col">Data</th>
              <th scope="col">Copia</th>
                  <th scope="col">Cancella</th>
                </tr>
              </thead>
              <tbody id="tlist">
                <?php

                  $html = '';
                  $c = new Myclass();
                  $html = $c->list_imgs($pdo);
                  echo $html;

                ?>
              </tbody>
            </table>
</div>

Это часть функции, которая показывает строку в таблице выше: 

$this->html .= '<tr><th class="no_text" scope="row">' . $this->row['id'] . '</th><td class="text">' . $this->row['foto'] . '</td><td class="no_text">' . $this->row['reg_date'] . '<td class="text-center"><a class="a_copy_img" title="copia immagine" data-clipboard-target=".text" href="#" rel="' . $this->row['id'] . '"' . '><i class="fa fa-clone" aria-hidden="true"></i></a></td>' . '<td class="text-center"><a class="a_trash_img" title="cancella immagine" href="#" rel="' . $this->row['id'] . '"' . '><i class="fas fa-trash" aria-hidden="true"></i></a></td>' . '</tr>';

1 Ответ

0 голосов
/ 14 июля 2020

Я был близок к решению, и это действительно правильный jquery код для решения проблемы: 

  <script>
    $(document).ready(function(){
      $(document).on("click", ".a_copy_img", function(){
          $(this).parents('#tlist > tr:first').find('td.text').CopyToClipboard();
        });
    });
  </script>

Решением было привязать событие к документу, и теперь оно работает также с элемент добавлен динамически.

Надеюсь, это поможет кому-то найти решение этой проблемы или что-то подобное.

...