使用 jQuery load/Ajax 函数后将剪贴板 JS 事件绑定到按钮

Question

我正在使用 ClipboardJS 库复制使用 data-clipboard-text 属性附加到按钮的文本。我还使用 jQuery 的 .load() 函数来动态提取 HTML 内容。此内容包括 Copy 文本按钮的副本。当使用 jQuery 加载 'fresh' 按钮时，按钮不再绑定事件。我在下面附上了我当前的工作代码。

有没有办法在加载动态内容后将事件重新绑定到按钮？最好使用 vanilla JS 解决方案。

jQuery 加载函数

jQuery(document).ready(function(e) {    
    // AJAX .load function for sendout post content
    e( ".sendout-link" ).click(function() {
        var post_url = e( this ).attr( "href" );
        e( "#sendout-container" ).html( '<div class="loading">Loading...</div>' );
        e( "#sendout-container" ).load( post_url, function( response, status, xhr ) {
            if ( status == "error" ) {
                var msg = "Sorry but there was an error: ";
                e( "#sendout-container" ).html( msg + xhr.status + " " + xhr.statusText );
            }
        });
        return false;
    });
});

ClipboardJS 代码

var btns = document.querySelectorAll('.copy-button');
var clipboard = new ClipboardJS(btns);
clipboard.on('success', function(e) {
    e.trigger.textContent = 'URL Copied';
    e.trigger.setAttribute('disabled', true);
    window.setTimeout(function() {
        e.trigger.textContent = 'Copy URL';
        e.trigger.removeAttribute('disabled');
    }, 5000);
});
clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});

Answer 1

您可以在动态 load() 过程中绑定事件。

function bindCopy(){
    var btns = document.querySelectorAll('.copy-button');
    var clipboard = new ClipboardJS(btns);
    clipboard.on('success', function(e) {
        e.trigger.textContent = 'URL Copied';
        e.trigger.setAttribute('disabled', true);
        window.setTimeout(function() {
            e.trigger.textContent = 'Copy URL';
            e.trigger.removeAttribute('disabled');
        }, 5000);
    });
    clipboard.on('error', function(e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });
}

jQuery(document).ready(function(e) {    
    // AJAX .load function for sendout post content
    e( ".sendout-link" ).click(function() {
        var post_url = e( this ).attr( "href" );
        e( "#sendout-container" ).html( '<div class="loading">Loading...</div>' );
        e( "#sendout-container" ).load( post_url, function( response, status, xhr ) {
            if ( status == "error" ) {
                var msg = "Sorry but there was an error: ";
                e( "#sendout-container" ).html( msg + xhr.status + " " + xhr.statusText );
            }else{
               bindCopy(); //each time content is loaded
            }
        });
        return false;
    });
    bindCopy(); //first time
});

使用 jQuery load/Ajax 函数后将剪贴板 JS 事件绑定到按钮

Bind Clipboard JS event to button after using jQuery load/Ajax function

javascript

jquery

clipboard.js