2
開発者を募集し、初めてStackOverflowに質問を投稿します。 トピックを調査しましたが、私の質問に対する正確な答えが見つかりませんでした。ダイナミックに作成されたHTMLリストにjQueryポップアップイベントを添付する方法
背景：
を動的に作成したリストの項目を受け入れるために、この静的なショッピングカートを変更します。 spanタグ情報を動的に別の関数によって提供され、spanタグを経由して、ショッピングカートに新しいアイテムを挿入しようとhttps://tutorialzine.com/2014/04/responsive-shopping-cart-layout-twitter-bootstrap-3
。
テスト目的のために、新しいアイテムをショッピングリストに挿入するためのボタンを使用しています。
ショッピングカートは個々の項目を「修正/削除」するポップオーバーイベントがあり
質問一覧表示されます：私はポップオーバーイベントを添付する正確なのJavaScript/jQueryのコマンドを把握することはできませんが。リスト内のすべての静的項目には、自動的に付加されたポップオーバーイベントがありますが、動的に作成される項目はありません。
私はaddEventListener（）を使用しようとしました。 jQueryは正しく接続されません。
私が最初に仮定したのは、動的に作成されたリストアイテムが、ポピュアイベントが自動的に適用される静的アイテムと同じ「クラス」を持つ場合でした。
これらのソリューションを試しましたが、私にとってはうまくいかなかったため、ポップオーバーイベントが正しく接続されません。
a。動的に作成された要素のイベントバインド Event binding on dynamically created elements?
b。 jQueryを使用して動的に作成された選択された選択にイベントをアタッチする Attach event to dynamically created chosen select using jQuery
c。
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 \t \t \t \t \t
var qty_span = document.createElement('span');
qty_span.setAttribute("class", "quantity");
qty_span.appendChild(document.createTextNode(qty_text));
// Create price span \t \t \t \t \t
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 \t \t \t \t \t
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>は、事前に素晴らしいサポートに感謝し、追加情報なら、私に連絡してください：jQueryのアヤックスここ Attaching events after DOM manipulation using JQuery ajax
を使用してDOM操作の後に取り付けたイベントは、HTMLとJavaScriptのです説明のために必要です。
お願いします。受け入れて回答してください。 – Pegues