单击function not working on the fly created div class (函数不工作于动态创建的div类)
我不确定如何处理这个问题。
我在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的按钮。
你知道解决这个问题的办法吗？或者我错过了一些简单的东西？
在单击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?");
};回答 2
Stack Overflow用户
发布于 2013-05-03 15:22:29
试试这个：-对于使用动态创建的元素，需要事件委托
$(".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文档的
委托事件的优点在于，它们可以处理稍后添加到文档中的后代元素中的事件。通过选取在附加委托事件处理程序时保证存在的元素，可以使用委托事件来避免频繁附加和移除事件处理程序。例如，此元素可以是Model- view -Controller设计中的视图的容器元素，或者，如果事件处理程序想要监视文档中的所有冒泡事件，则可以是文档。在加载任何其他超文本标记语言之前，document元素在文档头中可用，因此可以安全地在那里附加事件，而无需等待文档准备就绪。
Stack Overflow用户
发布于 2013-05-03 15:24:14
这是因为您必须为新创建的项重新分配事件处理程序。
一种更好的方法是在容器对象上使用.on，然后指定应该响应单击的子对象：
$(".container").on('click', '.blueBtn', blueBtnClicked);通过这种方式，即使您在飞行中广告对象，它们仍然会响应。这实际上是一种更有效的处理方式，因为您只创建一个事件处理程序，而不是创建多个事件处理程序。这实际上称为事件委托。
请记住，当您执行单击时，您是在告诉jQuery查找与selector匹配的所有元素，并为它们分配特定的“$(selector).click处理程序”。当您创建新对象时，这种情况不会再次发生，因为您不会告诉jQuery处理将来的每个对象(jQuery不会知道您添加了一个新按钮，也不会为它分配一个处理程序)。
https://stackoverflow.com/questions/16362366
复制相似问题
腾讯云开发者
