javascript - 如何为动态内容(模态)触发 jQuery 单击事件

我按照 this 答案的说明在用户单击按钮时复制 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>

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

最佳答案

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



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

// 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 Link - 工作演示

关于javascript - 如何为动态内容(模态)触发 jQuery 单击事件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32703673/