单击功能不适用于动态创建的 div 类

Question

我不确定如何解决这个问题。

我在 HTML 中制作了一些按钮，并添加了一些数据属性。这些按钮有一个名为 roleBtn 的类，它将调用我的 jQuery roleBtnClicked 函数并获取 HTML 数据属性中的变量。

$(".roleBtn").click(roleBtnClicked);

function roleBtnClicked(event){
    reg.roleName  = $(this).html();           /* Get role name: Actor */
    reg.blueBtn   = $(this).data('blue');     /* Get blue-btn-1 */
    reg.the_Num   = $(this).data('num');      /* Get the number */
    reg.modal_ID  = $(this).data('modal');    /* Get modal-1 */

现在使用此信息，单击roleBtn 后会出现一个模式窗口，然后我有一个doneButton 将关闭模式窗口并使用数据属性中的变量然后在飞。这个新的 HTML 将包含一个类为 blueBtn 的按钮。

我的问题是我的blueBtn 的点击功能不适用于动态创建的蓝色按钮。它将适用于事先已经具有类 blueBtn 的 div，但如果它是动态创建的则不起作用。

您知道解决方法吗？还是我错过了一些简单的东西？

点击doneButton 后，我有另一个函数可以即时创建新的 HTML，包括 blueBtns：

$('.selected_row .choices-col-left').append('<div class="blueBtn-holder" id="blueBtnHolder-'+theNum+'"><div class="blueBtn" id="'+blueBtn+'" row="'+rowName+'" modal="'+modal_ID+'" num="'+theNum+'">'+roleName+'</div></div>');

我的蓝色按钮点击功能不起作用

$(".blueBtn").click(blueBtnClicked);

function blueBtnClicked(event){
    alert("Where are you blueBtn on the fly?");
    console.log("Where are you blueBtn on the fly?");
};

Answer 1

这是因为您必须为新创建的项目重新分配事件处理程序。

更好的方法是在容器对象上使用.on，然后指定应该响应点击的子对象：

$(".container").on('click', '.blueBtn', blueBtnClicked);

这样，即使您在动态中添加对象，它们仍然会做出响应。这实际上是一种更有效的处理方式，因为您只创建一个与许多相反的事件处理程序。这实际上称为事件委托。

请记住，当您执行 $(selector).click 时，您是在告诉 jQuery 查找与 selector 匹配的所有元素并为它们分配特定的“点击处理程序”。当您创建新对象时，这不会再次发生，因为您没有告诉 jQuery 也处理每个未来的对象（jQuery 不会意识到您添加了新按钮，也不会为其分配处理程序）。

Answer 2

试试这个：- 您需要使用 .on()

对动态创建的元素进行事件委托

$(".selected_row").on('click', '.blueBtn', blueBtnClicked);

function blueBtnClicked(event){
    alert("Where are you blueBtn on the fly?");
    console.log("Where are you blueBtn on the fly?");
};

Demo

当你只是绑定一个点击事件时，它只会绑定到现有的 DOM 元素，所以你想将事件绑定到父元素，然后你添加与该容器相同的选择器的任何元素都会有事件可通过委托获得。

来自 Jquery 文档

委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。例如，此元素可以是模型-视图-控制器设计中视图的容器元素，或者如果事件处理程序想要监视文档中的所有冒泡事件，则可以是文档。在加载任何其他 HTML 之前，文档元素在文档头部是可用的，因此在此处附加事件是安全的，而无需等待文档准备好。