.click() event incorrect behaviour?

JavaScript
#1

Hi
purpose:
to append element on click to basket.

I got few problems:

  1. in my function that appends element to list of basket items , .click() only works when double clicked instead single click.
  2. 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);
}))
#2

the click method simulates a click, it’s not an event handler, it creates an event

#3

i wasnt precise,

  • so why double click?
  • why
$('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);
}))
  • why can get result of calling id ?
    even alert(li) wont show any event
#4

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

#5

This doesn’t make sense:

  • it’s $(document).ready(function() { /* code here */})
  • $(document).ready(function() { /* code here */})) means “select the document (ie the entire web page), and when document is ready (ie it’s fully loaded, ie when the "load" event has fired), run the function passed as a callback”
  • event handlers for browser JavaScript take an event as the callback, it’s an object created when the event occurs
  • dataTransfer is a property of events created by the browser drag-and-drop functionality, they have nothing to do with the document loading, hence the "load" event captured by $(document).ready does not have that property, hence you get an error.