Javascript 如何为动态内容（模式）触发jQuery单击事件

我按照答案上的说明，在用户单击按钮时复制URL。似乎工作正常，除非我将按钮移动到模式窗口中。我丢失了我的

单击事件处理程序

function copyTextToClipboard(text) {
    [...] // working implementation
}

$(function() {
    var currentPostUrl = window.location.href + "?ref=blogshare"
    var currentPostTitle = $('.post-title').text().trim();

    $('.js-copy-bob-btn').on('click', function(event) {
        copyTextToClipboard(currentPostUrl);
        console.log('copied')
    });

    $('#myModal').appendTo("body") 
});

这是我的HTML：

<!-- Modal -->

<div id="myModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" type="button" data-dismiss="modal">×</button>
            </div>

            <div class="modal-body">
                <div class="row modal-icons">
                    <div class="col-xs-5 text-center">
                        <a class="copy-url js-textareacopybtn" title="Step 2: Copy URL Button">
                            <h3>Copy Shareable Link</h3>
                        </a>

                       <-- THE BELOW BUTTON DOES NOT WORK AS DESIRED  -->  

                       <button class="js-copy-bob-btn">Copy Url</button>
                   </div>
               </div>
           </div>           
       </div>
   </div>
</div>

    <-- THE BELOW BUTTON WORKS AS DESIRED  (NO MODAL)-->

<button class="js-copy-bob-btn">Copy Url</button>


×
复制可共享链接
复制地址
复制地址

我哪里做错了？为什么第二个按钮（模态之外）可以工作，而第一个按钮不行？
我猜模态是以某种方式注入的动态标记。有各种模式风格/库，但我怀疑您的动态内容没有相应的事件处理程序。jQuery为我们提供了一种使用

根据一组特定的根元素，将处理程序附加到与选择器匹配的所有元素的一个或多个事件上（现在或将来）

我做了一个非常简单的例子来演示这个特定的场景。我正在制作和注入动态内容，通过
.on（）
和
.delegate（）
按钮连接到
点击
处理程序。请注意以下示例以及两者之间的差异

// faux modal
$('body').append('<div class="modal"><button class="js-copy-bob-btn">Copy Url</button></div>');

-正在运行的演示
您尝试过调试吗？是的，无法理解它。（'body'）。在（'click'，'js copy bob btn'，函数（事件）{

。。。。

// does not work
$('.js-copy-bob-btn').on('click', function(event) {
    console.log('copied via on');
});

// works - dynamic content
$('body').delegate('.js-copy-bob-btn', 'click', function() {
    console.log('copied via delegate');
});