Jquery on.click issue

Question

I've got two code samples, the first one is working properly, the second one isn't. Both of them should increase a counter when I click on the #incrementBtn.

Here are the samples (and I will provide all the code for further clarifications):

1

$('body').on('click','#incrementBtn', function(){
  let textAreaValue = parseInt($('textarea').val());
  $('textarea').val(textAreaValue+1)
});

2

$('#incrementBtn').on('click', function(){
  let textAreaValue = parseInt($('textarea').val()); 
  $('textarea').val(textAreaValue+1)
});

And one more question, what is the difference between using this (code doesn't work):

let textArea = $(<'textarea'>);      

let textAreaValue = parseInt(textArea.val());
textArea.val(textAreaValue+1);

And this (code works):

let textAreaValue = parseInt($('textarea').val());
$('textarea').val(textAreaValue+1)

Here is the full working code: https://jsfiddle.net/wjnjdk72/3/

why you write $(<'textarea'>); with '<' '>' , remove that and write $('textarea'); — eborrallo
– eborrallo, Commented Mar 29, 2018 at 9:54

nanobar · Accepted Answer · 2018-03-29 09:56:11Z

1

First issue:

You're applying the onclick handler to the element before you've inserted it dynamically into the DOM. The body handler works because it's listening for click events on the body element (which bubble up to it) from an element that matches that #incrementBtn selector (it doesn't matter if it's added to the page later on).

You can see this in action by swapping the order, if you add the element first it works:

incrementCounter('#wrapper'); // add the element first

$('#incrementBtn').on('click', function(){
  let textAreaValue = parseInt($('textarea').val()); 
  $('textarea').val(textAreaValue+1)
});

Second issue:

This syntax is invalid Javascript: $(<'textarea'>); You've added some random <> there.

answered Mar 29, 2018 at 9:56

nanobar

66.8k26 gold badges155 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ceaser Georgiev Over a year ago

I should have been more specific with the code that I gave, in the full code I used "let textArea = $('<textarea>'); " to define an html element and then append it to a div element. So my question boils down to this on this issue: Should I use textArea as a way to access it in the on.click function or should I just use 'textarea'?

nanobar Over a year ago

<textarea> is an invalid selector, it would always be textarea, ideally you would uses classes or IDs as using tag names will cause unexpected things to happen if you have other elements of the same tag on the page. Note that IDs are rarely considered good practice as people like to make reusable components and they can only appear once, or potentially have ID clashes with other elements and have unexpected behaviour

Damian Peralta · Accepted Answer · 2018-03-29 09:57:24Z

0

With jQuery you select HTML tags only with its name: "textarea", you don't need to include the <> characters

answered Mar 29, 2018 at 9:57

Damian Peralta

1,8969 silver badges12 bronze badges

Collectives™ on Stack Overflow

Jquery on.click issue

1

2

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1

2

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related