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

Jquery custom attribute access

there is a div present in my js file
<div id="myid" data="mydata"></div>
when i try to access custom attribute data with pure javascript
var data = document.getElementById('myid').getAttribute('data');
jquery alone
var data = $("#"+myid).attr('data');
above both mwthods are working properly but when i try to used the both jquery and javascript
var data = $("#"+myid).getAtrribute("data");
then is is giving error? but didn't able to get the reason ? can anyone explain please?

You are applying a dom method to a jquery object which causes error instead jquery has a method to convert the selector to the dom element .get():
$("#"+myid).get(0).getAtrribute("data");
alert($('#myid').get(0).getAttribute('data'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myid" data="mydata"></div>
As you are using a data attribute then better to use data-* attribute and jQuery has a method to get it with .data() method:
<div id="myid" data-mydata="CustomisedData"></div>
then in the jQuery:
$('#myid').data('mydata'); // will give you "CustomisedData"

Because $("#"+myid) is a jQuery instance, not HTML Element object. So you can't use DOM methods on some arbitrary object.
jQuery instance object is an array-like collection of DOM elements. It means that you can extract individual DOM element from it by index if you really need. So in your case you could do this:
$("#" + myid)[0].getAtrribute("data");
jQuery also offers dedicated method for it $.fn.get:
$("#" + myid).get(0).getAtrribute("data");

This should work:
var data = $("#"+myid)[0].getAtrribute("data");
Because to use javascript code, you need to use DOM object but jQuery uses array-like collection object.

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.

jQuery: Finding the number of attributes an element has

Suppose I have the xml element
<fruit color="blue" taste="sweet" shape="round"></fruit>
Without jQuery, I could use
fruit.attributes.length
How do I do this with jQuery?

Using jQuery, you'd simply retrieve the DOM element using get(index) or [index] from the jQuery object:
$('someSelector').get(0).attributes.length;
$('someSelector')[0].attributes.length;
jQuery does not provide a wrapper around this native DOMElement property.

I don't think jQuery has a way of doing that. You can do it without jQuery.
$('fruit')[0].attributes.length

Using element object with jQuery method?

I just started using jQuery. Now I want to use an jQuery method with an element object.
var element = document.elementFromPoint(x, y);
element.offset();
Of course this doesn't work because the variable element is not a jQuery selector, so the error message I get in Firebug is "element.offset is not a function".
Is there any general method I could use this element object with an jQuery selector?

You can turn a normal DOM element into a jQuery selection by wrapping it in $():
var element = document.elementFromPoint(x, y);
$(element).offset();

You need to wrap it into the jQuery constructor function, which returns a jQuery object.
jQuery(element).offset();
or shortcut method
$(element).offset();
http://api.jquery.com/jQuery/