有抱负的开发人员，第一次向 StackOverflow 发布问题。 研究了该主题，但找不到我的问题的确切答案。
背景:
修改此静态购物车，以接受动态创建的列表项。 https://tutorialzine.com/2014/04/responsive-shopping-cart-layout-twitter-bootstrap-3
尝试通过 span 标签将新商品插入购物车时，span 标签信息将由另一个函数动态提供。
出于测试目的，我使用一个按钮将新商品插入购物 list 。
购物车有“修改/删除”单个项目列表的弹出事件
问题:我想不出附加弹出事件的确切 JavaScript/jQuery 命令。列表中的所有静态项目都会自动附加弹出事件，但动态创建的项目不会。
我尝试使用 addEventListener()；但是 jQuery 没有正确附加。
我最初的假设是，如果动态创建的列表项与静态项具有相同的“类”，那么 popoever 事件也会自动应用于它们。
尝试了这些解决方案，但对我来说没有效果，弹出事件没有正确附加。
一个。动态创建的元素上的事件绑定(bind)？ Event binding on dynamically created elements?
使用 jQuery 将事件附加到动态创建的选定选择 Attach event to dynamically created chosen select using jQuery
使用 JQuery ajax 在 DOM 操作后附加事件 Attaching events after DOM manipulation using JQuery ajax
这是 HTML 和 JavaScript:
var qrcodelist = document.getElementById('qrdemo_list');
function myFunction() {
// HTML for testing when device is not connected: comment out when device is connected
var x = document.getElementsByClassName("decode-value-offline")[0].innerHTML;
// Qty and Price text values
var qty_text = 1;
var price_text = '$150';
// Create li
var entry_li = document.createElement('li');
entry_li.setAttribute("class", "row");
// Create quantity span
var qty_span = document.createElement('span');
qty_span.setAttribute("class", "quantity");
qty_span.appendChild(document.createTextNode(qty_text));
// Create price span
var price_span = document.createElement('span');
price_span.setAttribute("class", "price");
price_span.appendChild(document.createTextNode(price_text));
// Create pop btn span
var popbtn_span = document.createElement('span');
popbtn_span.setAttribute("class", "popbtn");
popbtn_span.setAttribute("data-original-title", "");
popbtn_span.setAttribute("title", "");
//popbtn_span.addEventListener( );
// Create a tag inside pop btn
var popbtn_a_span = document.createElement('a');
popbtn_a_span.setAttribute("class", "arrow");
popbtn_span.appendChild(popbtn_a_span);
// Create item span and text node
var item_span = document.createElement('span');
item_span.setAttribute("class", "itemName");
// Append span to li
entry_li.appendChild(qty_span);
entry_li.appendChild(item_span);
entry_li.appendChild(popbtn_span);
entry_li.appendChild(price_span);
// Create text node and insert qr-code result to li span
item_span.appendChild(document.createTextNode(x));
// Get list node and insert
var list_node = document.getElementById("qrdemo_list").lastChild;
// alert(list_node);
qrdemo_list.insertBefore(entry_li, qrdemo_list.childNodes[3]);
// Write x to console log
console.log(x);
}
// Popover JavaScript
$(function() {
var pop = $('.popbtn');
var row = $('.row:not(:first):not(:last)');
pop.popover({
trigger: 'manual',
html: true,
container: 'body',
placement: 'bottom',
animation: false,
content: function() {
return $('#popover').html();
}
});
pop.on('click', function(e) {
pop.popover('toggle');
pop.not(this).popover('hide');
});
$(window).on('resize', function() {
pop.popover('hide');
});
row.on('touchend', function(e) {
$(this).find('.popbtn').popover('toggle');
row.not(this).find('.popbtn').popover('hide');
return false;
});
});<!-- Shopping Cart List HTML -->
<div class="col-md-7 col-sm-12 text-left">
<ul id="qrdemo_list">
<li class="row list-inline columnCaptions">
<span>QTY</span>
<span>ITEM</span>
<span>Price</span>
</li>
<li class="row">
<span class="quantity">1</span>
<span class="itemName">Birthday Cake</span>
<span class="popbtn"><a class="arrow"></a></span>
<span class="price">$49.95</span>
</li>
<li class="row">
<span class="quantity">50</span>
<span class="itemName">Party Cups</span>
<span class="popbtn"><a class="arrow"></a></span>
<span class="price">$5.00</span>
</li>
<li class="row">
<span class="quantity">20</span>
<span class="itemName">Beer kegs</span>
<span class="popbtn"><a class="arrow"></a></span>
<span class="price">$919.99</span>
</li>
<li class="row">
<span class="quantity">18</span>
<span class="itemName">Pound of beef</span>
<span class="popbtn"><a class="arrow"></a></span>
<span class="price">$269.45</span>
</li>
<li class="row">
<span class="quantity">1</span>
<span class="itemName">Bullet-proof vest</span>
<span class="popbtn" data-parent="#asd" data-toggle="collapse" data-target="#demo"><a class="arrow"></a></span>
<span class="price">$450.00</span>
</li>
<li class="row totals">
<span class="itemName">Total:</span>
<span class="price">$1694.43</span>
<span class="order"> <a class="text-center">ORDER</a></span>
</li>
<li class="row">
<!-- QR Code Images -->
<span class="itemName"><img src="img/AppleQRCode.png" width="100" height="100"></span>
<span class="price"><img src="img/OrangeQRCode.png" width="100" height="100"></span>
</li>
<li class="row">
<!-- device offline testing span -->
<span class="decode-value-offline">Unknown</span>
</li>
<li class="row totals">
<!-- Button to insert qr-code result to list -->
<span class="order"><a class="text-center" onclick="myFunction()">Insert</a></span>
<span class="itemName">Insert QR Code Result</span>
</li>
</ul>
</div>
<!-- Popover HTML -->
<!-- The popover content -->
<div id="popover" style="display: none">
<a href="#"><span class="glyphicon glyphicon-pencil"></span></a>
<a href="#"><span class="glyphicon glyphicon-remove"></span></a>
</div>
<!-- JavaScript includes -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/customjs.js"></script>提前感谢大力支持，如果需要更多信息进行说明，请与我联系。
最佳答案
修复的 JSFiddle:https://jsfiddle.net/0phz61w7/
问题是您需要委托(delegate)事件。请执行以下操作:
改变:
pop.on('click', function(e) {
pop.popover('toggle');
pop.not(this).popover('hide');
});
收件人:
$(document).on('click', '.popbtn', function(e) {
pop.popover('toggle');
pop.not(this).popover('hide');
});
此外，您需要从第 54 行中删除 ，就在 console.log(x); 之后。那是抛出一个错误。
上面的修改有效，但是在提供的代码中，.popbtn 是不可见的，因为节点是空的。所以在提供的 jsfiddle 中，我添加了一个 CSS 规则来包含文本 POPBTN。单击它，我添加到单击事件的警报将触发。
关于javascript - 如何将 jQuery 弹出事件附加到动态创建的 HTML 列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45071573/