jQuery cannot get value of input field when using closest

Question

I'm trying to get the value of the input field with class keyHash when I click on the link with class loadKey. However, all I keep getting is undefined?

How is this done? Shouldn't this have worked?

Fiddle

<div class="accounts hash">
    <input type="text" class="input-tiny keyHash">
    <i class="icon-plus loadKey">Click</i>
</div>

$('.loadKey').live('click', function() {

    alert($(this).closest('.keyHash').val());

});

Answer 1

by documentation of closest, it is checks only the current element, and then its ancestors, in your case the input field is not ancestor, it is sibling

http://api.jquery.com/closest/

you can not acheive this using closest only

Answer 2

You can use the prev() method:

$('.loadKey').on('click', function() {
      alert($(this).prev('.keyHash').val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accounts hash">
    <input type="text" class="input-tiny keyHash">
    <i class="icon-plus loadKey">Click</i>
</div>

Side note: the live() method is deprecated in favour of .on() from jQuery 1.7

Side note: .on() method is used for binding all event handlers from jQuery 1.7. The .click() method internally uses .on(), it's just an alias for .on(). using .click() is just an overhead.

Answer 3

As per .closest() docs,for each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree but here input with class input-tiny and keyHash is not the ancestor but its sibling then in that case try below answers.

Try using .siblings() as shown :

$('.loadKey').click(function() {
    alert($(this).siblings('.input-tiny.keyHash').val());
});

DEMO

As per your html structure .siblings() shown above will work just fine but if you have other elements with class input-tiny and keyHash which are siblings of .loadKey then try :last selector :

$('.loadKey').click(function() {
   alert( $(this).siblings('.input-tiny.keyHash:last').val() );
});

DEMO

OR

Use .prev() as shown :

$('.loadKey').click(function() {
    alert($(this).prev('.keyHash').val());
});

DEMO

OR

Use .prevAll() with :first selector as shown :

$('.loadKey').click(function() {
   alert( $(this).prevAll('input:text[class="input-tiny keyHash"]:first').val() );
});

DEMO

OR

Use .parent() as shown :

$('.loadKey').click(function() {
   alert( $(this).parent().children('input:text[class="input-tiny keyHash"]').val())
});

DEMO

Don't use .live() its deprecated since jquery version 1.7(refer here) instead use .on() as shown :

$(document).on('click','.loadKey',function() {
    alert($(this).prev('.keyHash').val());
});

Note :- Above shown .on()(event delegation) example is only be used when you are adding html dynamically inside DOM with jquery.

Answer 4

Why don't you try FIDDLE

 $('.loadKey').on('click', function () {

      alert($(this).parent().find('.keyHash').val());

});

Answer 5

$('.loadKey').click(function() {

alert($(this).prev().val());

});

OR

$('.loadKey').click(function() {

alert($(this).prev('.keyHash').val());

});

Answer 6

This also worked for me http://jsfiddle.net/v25kt10r/9/

<div class="accounts hash">
    <input type="text" class="input-tiny keyHash">
    <i class="icon-plus loadKey">Click</i>
</div>
$('.loadKey').click(function() {

    alert($('.keyHash').val());

});

or

$('.loadKey').click(function() {

    alert($('.input-tiny').val());

});