单击函数不能在动态创建的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.这个新的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?");
};

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?");
};

演示

当您只绑定一个click事件时,它只会绑定到现有的DOM元素,因此您希望将事件绑定到父元素,以后随后使用该容器的相同选择器添加的任何元素都将通过委托使用该事件.

来自Jquery Docs

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