使用jQuery动态获取名称属性

Question

I have a div block where I am trying to find the name of the input element which was clicked and then update the value using jQuery:

 $(document).ready(function(){ $(this).click(function(){ console.log($(this).attr('name')); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <input type="text" name="name1" id="id1">TestData1</input> <input type="text" name="name2" id="id2">TestData2</input> </div> 

When I try to find the input element which was clicked I get undefined .

I am assuming it may be because I am checking click event on this and then again trying to get the attr name of it, but since it can increase to at least 5 input elements and these are being fetched dynamically, I cannot bind the id/class with click event.

Answer 1

The this has no context inside ready function :

$(this).click(function(){
_^^^^^___________________
   console.log($(this).attr('name'));
});

You should use input :

$('input').click(function(){
   console.log($(this).attr('name'));
});

NOTE ALSO : the input tag is self closed :

<input type="text" name="name1" id="id1" value='TestData1'/>
<input type="text" name="name2" id="id2" value='TestData2'/>

I hope this will helps.

 $(document).ready(function(){ $('input').click(function(){ console.log($(this).attr('name')); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <input type="text" name="name1" id="id1" value='TestData1'/> <input type="text" name="name2" id="id2" value='TestData2'/> </div> 

Answer 2

Why not bind by element instead?

$("input").click(function(){
   console.log($(this).attr('name'));
});

Answer 3

You are binding the click to document (Simply entire web page) and document doesn't have attribute called name . It will return undefined on console.

As other answers suggests, I'll also suggest binding click event to input instead of document .

If you want to bind click with document and find the target clicked element by using event which will be automatically available as an argument on click handler. Try with following snippet

 $(document).ready(function(){ $(this).click(function(event){ console.log($(event.target).attr('name')); }); }); 

 <div> <input type="text" name="name1" id="id1">TestData1</input> <input type="text" name="name2" id="id2">TestData2</input> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Here you access event target element on which you clicked and using it to get name attribute value. It returns name attribute value if your target element has name attribute else undefined will be returned.