Question

有抱负的开发人员并第一次向StackOverflow发帖提问。研究了这个主题，但无法找到我问题的确切答案。

背景：
- 修改此静态购物车，接受动态创建的列表项。 https://tutorialzine.com/2014/04/responsive-shopping-cart-layout-twitter-bootstrap-3
- 尝试通过span标签将新项目插入购物车，span标签信息将由另一个功能动态提供。
- 出于测试目的，我使用按钮将新项目插入购物清单。
- 购物车的弹出事件为＆＃34;修改/删除＆＃34;个别项目清单
问题：我无法确定附加popover事件的确切JavaScript / jQuery命令。列表中的所有静态项都会自动附加弹出事件，但动态创建的项不会。
- 我尝试使用addEventListener（）;但是jQuery并没有得到正确的附加。
- 我最初的假设是动态创建的列表项是否具有相同的＆＃34;类＆＃34;作为popoever事件也将自动应用于它们的静态项目。
- 尝试过这些解决方案，但对我来说没有用，弹出事件并没有得到正确的附加。
一个。动态创建元素的事件绑定？ 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：

＆＃13;

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

＆＃13;

<!-- 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>

＆＃13;

提前获得大力支持，如果需要补充信息，请与我联系。

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列表中

2 个答案: