Hi
purpose:
to append element on click to basket.
I got few problems:
- in my function that appends element to list of basket items , .click() only works when double clicked instead single click.
- click() method wouldn’t act as event handler, wont trigger event.
thats from list of items:
<ul id="listOfItems">
<li>
<div class="description">
<h4 class="name">Item ONE </h4>
<span class="price">
<h4>21.00</h4>
</span>
</div>
</li>
</ul>
list of items in basket:
<div id="basketItems">
<ul id="basketListNames">
<li></li>
</ul>
<ul id="basketListPrices">
<li></li>
</ul>
</div>
function :
window.onload = function () {
$('#listOfItems .description').click(function () {
let name = this.firstChild;
let price = this.lastChild;
$('#basketListNames').append(name);
$('#basketListPrices').append(price);
})
}
alternative that wont accept event:
$('document'.ready(function(event){
event.dataTransfer.setData('text', event.target.id);
let id = event.dataTransfer.getData('text');
let name = $('#'+id+ ' .name').text();
let price =$('#'+id+ ' .price').text();
li ="<li class='itemInBasket'>name + ' ' + <span class='priceInBasket>'£' + price </span></li>"
$('#basketItems').append(li);
}))