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

Question

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

背景：
- 正在修改此静态购物车，以接受动态创建的列表项。 https://tutorialzine.com/2014/04/responsive-shopping-cart-layout-twitter-bootstrap-3
- 尝试通过 span 标签将新商品插入购物车，span 标签信息将由另一个函数动态提供。
- 出于测试目的，我使用按钮将新商品插入购物清单。
- 购物车有 "Modify / Delete" 个单个项目列表的弹出事件
问题：我想不出附加弹出事件的确切 JavaScript / jQuery 命令。列表中的所有静态项目都会自动附加弹出事件，但动态创建的项目不会。
- 我尝试使用 addEventListener();但是 jQuery 没有正确附加。
- 我最初的假设是，如果动态创建的列表项与静态项具有相同的 "class"，那么 popoever 事件也会自动应用于它们。
- 尝试了这些解决方案，但对我来说没有效果，弹出事件没有正确附加。
一个。动态创建的元素上的事件绑定？ Event binding on dynamically created elements?

b。使用 jQuery 将事件附加到动态创建的选定 select Attach event to dynamically created chosen select using jQuery

c。使用 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 = '0';

// 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">.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">.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">9.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">9.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">0.00</span>
    </li>
    <li class="row totals">
      <span class="itemName">Total:</span>
      <span class="price">94.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');
});

此外，您需要从第 54 行中删除 }，就在 console.log(x); 之后。那是抛出错误。

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

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

How to attach jQuery pop-up event to dynamically created HTML List

html

javascript

jquery

shopping-cart

twitter-bootstrap