We Keep Coding

dynamically added input element doesn't return value in script

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?

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"));

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

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 !!

Why would jQuery return undefined for the css function of an element?

jQuery 1.11.1, on Mac OS X Mavericks, latest version of Safari.
I'm trying to set CSS properties with the css function. css() is missing from elements.
First, I validated that the element is selected correctly:
// There is only one element that has id="container"
var $container = $('#container');
// Selector returns a collection. I have to access first element:
console.log($container[0]); // prints HTMLDivElement
// css function is undefined
console.log($container[0].css); // prints undefined
// Also can't set any css value. Gives undefined error.
$container[0].css({backgroundColor:'blue'});
The error is:
TypeError: 'undefined' is not a function (evaluating
'$container[0].css({backgroundColor:'blue'})')
I removed everything from the test page. It includes jQuery, and within the body it has the div with the ID. Very simple. Beneath that, there is the JavaScript code shown above.
Any idea why the div would be lacking the css function?

It is because you are dropping out of the jQuery object and are using the DOM element...
$container[0].css({backgroundColor:'blue'});
The [0] here gets you the DOM object from the jQuery object.
Use jQuery if you want to access the jQuery method...
$container.css({backgroundColor:'blue'});

You're using jQuery incorrectly. When you say $container[0] you are getting the first javascript DOM element of the jQuery object (which doesn't have any jquery functions attached to it). If you want to get the css background color of the element using jQuery you need to do $container.css("background-color"), and to set it $container.css("background-color", "blue"); or $container.css({ "background-color": "blue" });

Because the css function is a method of a jquery object. When you do $container[0] you get the first DOM node that matched the selector, which is not a jquery object.
Try $container.css(...).

When you access the collection items, no longer has the jQuery methods, only the DOM elements.
You could replace:
$container[0].css({backgroundColor:'blue'});
by
$container.css({backgroundColor:'blue'});

If you have one more div element with the same css attribute,
for instance lets say below statement returns more than one result:
var $container = $('.container'); // Has 3 results
And you want to reach specific elements css attribute then you can revert the dom element into jquery element and do what you want as below:
$($('.container').get(2)).css({ "background-color": "blue" });

http://jsfiddle.net/JNR63/
check this example
alert($container.css("width"));

Getting html DOM element from JQuery element

Below code gives me JQuery object, which includes JQuery functions associated with.
var element = $("#element");
But how can I get the HTML DOM element from the above JQuery object ?

Fetch first item from jQuery object
var element = $("#element")[0];

You can use get (link to API).
element.get()
It will return an array.

Calling jQuery $ function on 'this'

In the following code, why is it necessary to surround 'this' with the $ function?
var x = $('div');
x.click(function(){
$(this).hide();
});
doesn't 'this' just refer to the expression x which is itself a jQuery object?

The value of this will be the DOM node representing the clicked element. $(this) will be a jQuery object wrapping that DOM node, and providing extra functions like .show(), .append(), etc.

No : this is the unwrapped DOM element, as specified in the documentation :
The handler parameter takes a callback function, as shown above.
Within the handler, the keyword this refers to the DOM element to
which the handler is bound. To make use of the element in jQuery, it
can be passed to the normal $() function.

this reffers div ... thats mean that your div will hide when you click in it.
this always reffers what its in context.

What's the opposite of jQuery `.get()`?

.get() converts a jQuery object to a DOM element that Javascript can use without jQuery.
If I have a DOM element, how can I convert it to a jQuery object?

jQuery core syntax accepts DOM elements: $(theDomElement).
jQuery( element )
element A DOM element to wrap in a jQuery object.
Recall that you're doing this every time you write $(this).

var myDOMElement = document.getElementById("myDomId");
var myDOMElementConvertedTojQueryObject = $(myDOMElement);