使用clipboard.js无法复制文本，无报错但功能失效求助

核心问题 #

1. data-clipboard-text 属性未加引号：按钮代码里 data-clipboard-text=+ url + 未给属性值添加引号，若URL包含&、?`等特殊字符，会导致属性值被截断，Clipboard.js无法读取完整内容。
2. 动态脚本拼接的执行隐患：通过拼接<script>字符串再追加到body的方式，存在执行时机或解析异常的可能，直接在DOM插入完成后初始化Clipboard实例更可靠。
3. AJAX函数冗余处理：ajax函数中的.done回调返回值无意义，$.ajax本身返回的Promise会自动resolve响应数据。

修改后的代码 #

主逻辑代码 #

$(document).ready(async function () {
    var html = ''
    let response = await ajax('/admin/all_files', 'POST', '')
    for (let i = 0; i < response.length; i++) {
        var url = window.location.origin + '/get_file/' + response[i][0]
        // 给data-clipboard-text属性值添加引号，避免URL特殊字符截断
        html += `<div>
                <img src="`+ url +`" alt="">
                <div>
                    <button id="ttc_`+ i +`_url" data-clipboard-text="`+ url +`">URL</button>
                </div>
            </div>`
    }
    $('#insert_image_modal_body').html(html)
    // DOM插入后直接初始化Clipboard实例，无需拼接脚本字符串
    for (let i = 0; i < response.length; i++) {
        new Clipboard('#ttc_'+ i +'_url');
    }
})

简化后的AJAX函数 #

async function ajax(url, method, data) {
    return $.ajax({
        url: window.location.origin + url,
        method: method,
        data: data
    });
}

额外优化建议 #

可以给所有复制按钮统一添加类名（比如clipboard-btn），仅初始化一次Clipboard实例，提升效率同时避免依赖动态ID：

// 生成按钮时添加统一类名
html += `<button class="clipboard-btn" data-clipboard-text="`+ url +`">URL</button>`
// DOM插入后仅初始化一次
new Clipboard('.clipboard-btn');

内容的提问来源于stack exchange，提问作者Usama Javed