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

Question

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

1. 背景：

   • 修改此静态购物车，以接受动态创建的列表项。 https://tutorialzine.com/2014/04/responsive-shopping-cart-layout-twitter-bootstrap-3

   • 尝试通过span标签将新商品插入购物车时，另一个功能将动态提供span标签信息。

   • 为了进行测试，我使用按钮将新商品插入购物清单。

   • 购物车具有弹出事件，可“修改/删除”单个项目列表

2. 问题：我不知道附加popover事件的确切JavaScript / jQuery命令。 列表中的所有静态项目都会自动附加popover事件，但动态创建的项目则不会。

   • 我尝试使用addEventListener（）; 但是jQuery无法正确连接。

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

   • 尝试了这些解决方案，但对我却没有解决，popover事件未正确附加。

   一种。 在动态创建的元素上进行事件绑定？ 在动态创建的元素上进行事件绑定？

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

   C。 使用JQuery ajax 进行DOM操作后附加事件

3. 这是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> 

预先感谢您的大力支持，如果需要其他信息进行说明，请与我联系。

Answer 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)');

Answer 2

JSFiddle修复程序： https ://jsfiddle.net/0phz61w7/

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

更改：

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');
});

另外，您需要在console.log(x);之后的第54行中删除} console.log(x); 。 那抛出一个错误。

上面的修改有效，但是在提供的代码中， .popbtn不可见，因为该节点为空。 因此，在提供的jsfiddle中，我添加了一个CSS规则以包含文本POPBTN 。 单击该按钮，就会触发我添加到click事件的警报。