Javascript 如何将jQuery弹出事件附加到动态创建的HTML列表

有抱负的开发人员，第一次向StackOverflow发布问题。 研究了这个话题，但找不到我问题的确切答案

背景：

• 修改此静态购物车以接受动态创建的列表项。

• 试图通过span标记将新项目插入购物车，span标记信息将由另一个函数动态提供

• 出于测试目的，我使用一个按钮将新项目插入购物清单

• 购物车具有“修改/删除”单个项目列表的popover事件

问题：我无法确定附加popover事件的确切JavaScript/jQuery命令。列表中的所有静态项都会自动附加popover事件，但动态创建的项不会

• 我尝试使用addEventListener（）；但是jQuery没有正确连接

• 我最初的假设是，如果动态创建的列表项与静态项具有相同的“类”，那么popoever事件也会自动应用于它们

• 尝试了这些解决方案，但对我无效，popover事件未正确连接

a。动态创建元素上的事件绑定？

b。使用jQuery将事件附加到动态创建的选定选择

c。使用JQuery ajax在DOM操作后附加事件

以下是HTML和JavaScript：

var qrcodelist=document.getElementById（'qrdemo_list'）；
函数myFunction（）{
//未连接设备时用于测试的HTML：连接设备时注释掉
var x=document.getElementsByClassName（“脱机解码值”）[0].innerHTML；
//数量和价格文本值
变量数量_文本=1；
var price_text='150美元'；
//创立
var entry_li=document.createElement（'li'）；
条目_li.setAttribute（“类”、“行”）；
//创建数量范围
var qty_span=document.createElement（'span'）；
数量设置属性（“类别”、“数量”）；
数量span.appendChild（document.createTextNode（数量文本））；
//创建价格区间
var price_span=document.createElement（'span'）；
price_span.setAttribute（“类”、“价格”）；
price_span.appendChild（document.createTextNode（price_text））；
//创建pop btn范围
var popbtn_span=document.createElement（'span'）；
popbtn_span.setAttribute（“类”、“popbtn”）；
popbtn_span.setAttribute（“数据原始标题”，“数据原始标题”）；
popbtn_span.setAttribute（“title”，”）；
//popbtn_span.addEventListener（）；
//在pop btn内创建标签
var popbtn_a_span=document.createElement（'a'）；
popbtn_a_span.setAttribute（“类”、“箭头”）；
popbtn_span.appendChild（popbtn_a_span）；
//创建项目范围和文本节点
var item_span=document.createElement（'span'）；
项_span.setAttribute（“类”、“项名称”）；
//给李加上span
分录附加子项（数量跨度）；
条目附录子项（项目跨度）；
条目i.appendChild（popbtn_span）；
分录附件（价格范围）；
//创建文本节点并将二维码结果插入到li span
项目_span.appendChild（document.createTextNode（x））；
//获取列表节点并插入
var list_node=document.getElementById（“qrdemo_list”）.lastChild；
//警报（列表\节点）；
qrdemo_list.insertBefore（entry_li，qrdemo_list.childNodes[3]）；
//将x写入控制台日志
控制台日志（x）；
}
//流行脚本
$（函数（）{
var pop=$（'.popbtn'）；
变量行=$（'.row:not（：first）：not（：last）'）；
爆米花({
触发器：“手动”，
是的，
容器：'主体'，
位置：'底部'，
动画：错，
内容：函数（）{
返回$（'#popover'）.html（）；
}
});
点击功能（e）{
pop.popover（'toggle'）；
pop.not（this.popover（'hide'）；
});
$（窗口）.on（'resize'，function（））{
pop.popover（“隐藏”）；
});
行on（'touchend'，函数（e）{
$（this.find（'.popbtn'）.popover（'toggle'）；
row.not（this.find（'.popbtn'）.popover（'hide'）；
返回false；
});
});



数量
项目
价格


1.
生日蛋糕
您需要将jquery功能委托给动态创建的HTML元素，如下所示：

改变你的下一行

var pop = $('.popbtn');
var row = $('.row:not(:first):not(:last)');

就像这里给出的：

var pop = $(document).find('.popbtn');
var row = $(document).find('.row:not(:first):not(:last)');

JSFIDLE修复程序：

问题是您需要委派事件。请执行以下操作：

更改：

pop.on('click', function(e) {
    pop.popover('toggle');
    pop.not(this).popover('hide');
});

致：

另外，您需要从第54行删除
}
，就在
console.log（x）之后。这是一个错误

上述修改有效，但在提供的代码中，
.popbtn
不可见，因为节点为空。因此，在提供的JSFIDLE中，我添加了一个CSS规则来包含文本
POPBTN
。单击该按钮，我添加到单击事件中的警报将触发。
Hi！非常感谢您的回复。尝试了上述更改，但对我无效。以下是我从Firefox开发者版查看时得到的结果。静态内容（生日蛋糕）显示“EV”，但通过“插入按钮”显示的动态内容（未知）不显示。在新的委托事件中，添加一个
控制台.log
，查看单击
.popbtn
时是否识别单击事件。如果点击事件被识别，这意味着
pop.popover（'toggle'）
或
pop.not（this.popover（'hide'）
有问题，需要查看。代码问题：第54行，您有一个关闭的
}
没有打开的花括号-这就在
console.log（x）之后应该被删除。嗨！感谢您的答复。我把javascript搞砸了，没有包括按钮点击功能。更新了上述代码。您认为可以重新编写JSFIDLE代码来适应这种变化吗？我自己试过了，但没有达到预期的效果。非常感谢你。
$(document).on('click', '.popbtn', function(e) {
    pop.popover('toggle');
    pop.not(this).popover('hide');
});