0

What is the difference between $('id or class name').click(function() vs $(document).on('click', '.id or classname', function(e).

  1. How to best use each one.
  2. What is the situation that use each one.
  3. What is the advantage of one over the other

I have a couple of examples where $(document).on('click', '.id or class-name', function() works and $('id or class name').click(function() did not work the most recent encounter is one during this project of mine where I generate a table with values then at the last TD i have an anchor with a class named add. I made it a class so event if I have multiple generated row the click event will still fire but again using $('#add').click didn't work while using $(document).on('click', '.id or class-name', function(e) worked.

Also this is not same but using $('#file') didn't work here so i just added it.

Getting the content of input file using id var file = document.getElementById('file').files[0]; worked but var file = $('#file').files[0];

T check the file like this 

var name = file.name;
var size = file.size;
var type = file.type;
console.log("name " + name);
console.log("size " + size);
console.log("type " + type);

The result of this is 

name whomovedmycheese - Copy.pdf
size 500624
type application/pdf

I know that using $('# or . then name') will select the id or class but why is it not working during these times. Some may just point me to document I read them but I don't think i fully understand all of them that is why I am confused on these thing. Any clarification is appreciated.

empiric
  • 7,825
  • 7
  • 37
  • 48
Brownman Revival
  • 3,620
  • 9
  • 31
  • 69
  • 5
    http://learn.jquery.com/events/event-delegation/ – Arun P Johny Mar 20 '15 at 07:00
  • Only typo error sir Manoz i wanted to fix it but someone already did it for me – Brownman Revival Mar 20 '15 at 07:05
  • ` $('#file')` is a jQuery element. ` $('#file')[0]` is the raw DOM element. To access files you need the files property of the raw DOM element ` $('#file')[0].files[0]` would work. – Miguel Mota Mar 20 '15 at 07:05
  • @Moogs let me try it and i will be back on you on this – Brownman Revival Mar 20 '15 at 07:06
  • i see it did work so using $('# or . ') alone does not use or access DOM? Is this what your trying to say? – Brownman Revival Mar 20 '15 at 07:08
  • 1
    @HogRider: No, he is not. He is saying that a jQuery object is not a DOM element. A jQuery object is a **wrapper** around a collection ofDOM elements. If you want to access a property of the DOM element (e.g. `files`), then you need to either access the underlying DOM elements (`$('#file')[0]`) or use `.prop`: `$('$file').prop('files')`. – Felix Kling Mar 20 '15 at 07:10
  • Yeah Felix is right, I should of said jQuery object instead of jQuery element. – Miguel Mota Mar 20 '15 at 07:13
  • from the link i think i understand it a bit my follow up question is this for example i have this many element i put on single event handles for them do i need to change it so all of them can listen to parent event?Does this improve the performance of the project? – Brownman Revival Mar 20 '15 at 07:19
  • 1
    @HogRider it improves the performance because you have less click handlers which means there is less memory being allocated – Miguel Mota Mar 20 '15 at 07:34

0 Answers0