jQuery Clipboard Plugin not working on dynamically added elements

Question

I'm using the jQuery Clipboard plugin.

JS:-

jQuery(document).ready(function($) {
    jQuery('.the_clipboard').clipboard({
        path: 'path/to/jquery.clipboard.swf',
        copy: function() {
            return jQuery(this).parent().find('.copyable').text();
        }
    });
});

HTML:

<td>
    <span class="copyable">TO_BE_COPIED</span>
    <button class="the_clipboard btn btn-sm" style="margin-top:-2px;">
        <span class="glyphicon glyphicon-paperclip"></span>
    </button>
</td>    

When new td elements are added then the text doesn't get copied to the clipboard, when the_clipboard is clicked.

Answer 1

Your code to call the clipboard plugin on the .the_clipboard elements is only run on page load. You will need to run it again on the td elements that are added dynamically.