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。这个新的HTML将包含一个类为blueBtn的按钮。

我的问题是blueBtn的点击功能无法在动态创建的蓝色按钮上运行。它将在一个已经具有类blueBtn的div上工作，但如果它是在运行中创建的则不起作用。

你知道解决方法吗？或者我错过了一些简单的东西？

点击doneButton后，我有另一个功能，可以动态创建包含blueBtns的新HTML：

$('.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()

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

$(".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

当您只绑定一个click事件时，它只会绑定到现有的DOM元素，因此您希望将事件绑定到父元素，以后随后使用该容器的相同选择器添加的任何元素都将具有该事件由代表团提供。

来自Jquery文档

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

Answer 2

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

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

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

这种方式即使您动态广告对象，它们仍会响应。这实际上是一种更有效的处理方式，因为你只创建一个与许多人相对的事件处理程序。这实际上称为事件委托。

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

单击函数不能在动态创建的div类上工作

2 个答案:

Demo