How to Create dynamic copy button with jquery?

问题

I am figuring out the way to create a dynamic multiple copy button without creating an individual function for each copy button. for that, I search google but not find a reliable piece of code.

have a look at what I trying to achieve but I don't know how it will be accomplished because I bit noob to Jquery.

example:

As you can see each tracking code have individual copy button and each tracking code is dynamically generated from the database with its own copy button. All I want is to find a way to create an individual copy button but don't know how.

Here is a single value copy button that I have accomplished so far and the only problem with this snippet is that its only work once because of ID and I don't want to create multiple IDs for an individual function.

function copyToClipboard(element) {
      var $temp = $("<input>");
      $("body").append($temp);
      $temp.val($(element).text()).select();
      document.execCommand("copy");
      $temp.remove();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>

<span id='c1' ><span style="color:#59c053;">4C3B2</span></span>
 
  <button style="margin-left:5px;float:;" onclick="copyToClipboard('#c1')" type="button" class="btn btn-info btn-xs">Copy</button>
  
  <br>
  <textarea rows="4" cols="25" placeholder="paste it here..."></textarea>
  </body>

回答1:

If you put each of the codes in a container along with the copy button you can use $(el).parents() to get the code without an id.

HTML:

<div class="code-container">
    <span id='c1' class="code"><span style="color:#59c053;">4C3B2</span></span>
    <button style="margin-left:5px;float:;" onclick="copyToClipboard(this)" type="button" class="btn btn-info btn-xs">Copy</button>
</div>
<div class="code-container">
    <span id='c2' class="code"><span style="color:#59c053;">WD36F4</span></span>
    <button style="margin-left:5px;float:;" onclick="copyToClipboard(this)" type="button" class="btn btn-info btn-xs">Copy</button>
</div>
<textarea rows="4" cols="25" placeholder="paste it here..."></textarea>

And the JS (element is now the button rather than the code):

function copyToClipboard(element) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).parents('.code-container').find('.code span').text()).select();
    document.execCommand("copy");
    $temp.remove();
}

So we basically look for the parent container of the button and then look for the code within that.

回答2:

I'm sure you can make my approach better but here is my code using your code:

const trackingCodes = ["4C3B2", "91830", "17253", "2177E", "FER8F"];

window.onload = () => {
  const codesContainer = document.querySelector('.trackingCodeContainer')

  let design = trackingCodes.forEach((code, i) => {
    const newDiv = document.createElement('div');
    newDiv.style = "text-align: center;"
    const newSpan = createSpan(code, i);
    newDiv.appendChild(newSpan);
    newDiv.appendChild(createButton(newSpan.id))
    codesContainer.appendChild(newDiv)
  })
}

createSpan = (code, i) => {
  const newSpan = document.createElement('span');
  newSpan.id = `span${i}`
  newSpan.style = "color: #59c053;";
  newSpan.appendChild(document.createTextNode(code));
  return newSpan;
}

createButton = (spanId) => {
  const newButton = document.createElement('button');
  newButton.style = "margin-left:5px;";
  newButton.addEventListener('click', (e) => {
    const $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(`#${spanId}`).text()).select();
    document.execCommand("copy");
    $temp.remove();
  });
  newButton.appendChild(document.createTextNode("Copy"));
  return newButton;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="trackingCodeContainer" style="width: 100%"></div>
<br>
<textarea rows="4" cols="25" placeholder="paste it here..."></textarea>

来源：https://stackoverflow.com/questions/55303818/how-to-create-dynamic-copy-button-with-jquery

标签

javascript

jquery

html