如何为动态内容(模态)触发jQuery点击事件?

How can I fire a jQuery click event for dynamic content (modal)

本文关键字：jQuery 触发 事件 模态 动态      更新时间：2023-09-26

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

我哪里错了?为什么第二个按钮(模态外)工作，但不是第一个按钮?

我猜你的模态是动态标记，以这种或那种方式注入。有各种各样的模式风格/库在那里，但我怀疑你的动态内容没有适当的事件处理程序。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 Link - working demo

相关文章：