3

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

我在 HTML 中制作了一些按钮，并添加了一些数据属性。这些按钮有一个名为的类roleBtn，它将调用我的 jQueryroleBtnClicked函数并获取 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不适用于动态创建的蓝色按钮。它适用于事先已经拥有该类的 div blueBtn，但如果它是动态创建的，则不起作用。

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

单击后，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?");
};
4

2 回答 2

7

试试这个： - 您需要使用.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?");
};

演示

当您仅绑定单击事件时，它只会绑定到现有的 DOM 元素，因此您希望将事件绑定到父元素，稍后您使用与该容器相同的选择器添加的任何元素都将通过委托获得该事件.

来自 Jquery 文档

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

于 2013-05-03T15:22:28.533 回答
4

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

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

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

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

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

于 2013-05-03T15:24:14.050 回答