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

Question

我按照此答案的说明在用户单击按钮时复制 URL。 似乎工作正常，除非我将按钮移动到模态窗口中。 我丢失了click事件处理程序。

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>

我哪里错了？ 为什么第二个按钮（模态之外）有效，但第一个按钮无效？

Answer 1

我猜你的模态是以一种或另一种方式注入的动态标记。 那里有各种模态风格/库，但我怀疑您的动态内容没有合适的事件处理程序。 jQuery 为我们提供了一种使用delegate()做到这一点的方法

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

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

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

---

// 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');
});

JSFiddle 链接- 工作演示