Function description:
Click the "Copy" button to get the text under child element () under parent element () of the current click event
HTML code
<div class="chats"> <div class="block"> <div class="layui-col-xs12 layui-col-sm12 layui-col-md12" style="width: 90%; margin: 0.2rem auto; box-sizing:border-box; display:flex;flex-direction:row;"> <!-- Omit some code --> <div style="flex: 0.9; line-height: 0.45rem; margin: 0 0.1rem; background: #F5F5F5; padding: 0.1rem; border-radius:5px"> <p>Hello! It seems like you've entered a string of "nnnn." If you have any questions or need assistance</p> </div> </div> <div class="layui-col-xs12 layui-col-sm12 layui-col-md12"> <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="copy-link">copy</a> </div> </div> <div class="block"> <div class="layui-col-xs12 layui-col-sm12 layui-col-md12" style="width: 90%; margin: 0.2rem auto; box-sizing:border-box; display:flex;flex-direction:row;"> <!-- Omit some code --> <div style="flex: 0.9; line-height: 0.45rem; margin: 0 0.1rem; background: #F5F5F5; padding: 0.1rem; border-radius:5px"> <p>Hello! please feel free to ask, and I'll be happy to help.</p> </div> </div> <div class="layui-col-xs12 layui-col-sm12 layui-col-md12"> <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="copy-link">copy</a> </div> </div> </div>
Js code
('DOMContentLoaded', function() { // Add click event listening to all .block parent elements, and use event delegate to handle .copy-link clicks ('.chats').addEventListener('click', function(e) { // Check if the clicked element is what we want.copy-link if (('.copy-link')) { // Find the .block where the .copy-link you clicked is located var block = ('.block'); // Find #textToCopy in .block (Note: ID should be unique, here is only an example) var textToCopy = ('#textToCopy p'); // Get text content var text = || ; // (text) // Copy using API (modern browser) if () { (text).then(function() { ('Copy successfully'); }, function(err) { ('Copy failed:', err); }); } else { // For browsers that do not support the Clipboard API, old methods can be used (such as creating a temporary textarea) var textarea = ('textarea'); = text; (textarea); (); ('copy'); (textarea); ('Copyed to clipboard'); } } }); });
Summarize
This is the article about the implementation of front-end jQuery copy text to clipboard function. For more related content on jQuery copy text to clipboard, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!