dynamically added input element doesn't return value in script

Question

After adding dynamically input element (with class "dateValidation") inside static div ( with class "workItems") I use this to provide onclick function:

$(".workItems").on("click", ".dateValidation", function()
{...});

and when I in function above run f.e

alert(this);

I get: [object HTMLInputElement] (I think it's good)

but, when I run:

alert(this.val());
alert(this.hasClass("dateValidation"));

Nothing happens. What is wrong with this code? How Can I get f.e value of this input element?

gurvinder372 · Accepted Answer · 2016-04-27 12:25:37Z

4

this is a DOM element, you need to convert it to jquery element before running jquery functions on it

alert($(this).val());
alert($(this).hasClass("dateValidation"));

answered Apr 27, 2016 at 12:25

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

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

5 Comments

gurvinder372 Over a year ago

@nolbadi111 is your _checkingDate function expecting a DOM object or jquery object

nolbadi111 Over a year ago

$(".workItems").on("click", ".dateValidation", function() {_settingPlaceholderDate(this);} and function _settingPlaceholderDate(providedDate){ $(providedDate).attr("placeholder","dd-mm-rrrr");};

gurvinder372 Over a year ago

@nolbadi111 is this working fine? what is the question?

nolbadi111 Over a year ago

No, it doesn't work, but only on dynamically added input. When I use _settingPlaceholderDate(this) on static element everything is correct.

gurvinder372 Over a year ago

Didn't understand this. Can you add the actual problem you are facing in your question?

Dhara Parmar · Accepted Answer · 2016-04-27 12:25:53Z

0

Use $(this).val() and $(this).hasClass("dateValidation"); instead of this.

answered Apr 27, 2016 at 12:25

Dhara Parmar

8,1231 gold badge19 silver badges27 bronze badges

Comments

Vikash Kumar · Accepted Answer · 2016-04-27 12:56:06Z

0

this is the DOM object, whereas $(this) is the jQuery wrapper.

Using this, you can call DOM methods/attributes but not jQuery methods. And when using $(this), you can call jQuery methods not DOM methods.

In your case you're trying to access the jQuery method val() using DOM object this which is wrong. So you've to use jQuery methods using jQuery wrapper $(this).

Updated script would be like this.

alert($(this).val());
alert($(this).hasClass("dateValidation"));

Hope this will help to you find issue !!

answered Apr 27, 2016 at 12:56

Vikash Kumar

1,1119 silver badges17 bronze badges

Collectives™ on Stack Overflow

dynamically added input element doesn't return value in script

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related