javascript - JQuery closest() returns undefined - Stack Overflow

admin管理员组

文章数量:1333210

I am trying to get the value of a hidden input field using closest() but undefined is returned instead.

This is the html template:

<div class="content">
    <input type="hidden" value="ABC123" class="imgRef">

    <div class="input-group">
        <input type="text" class="form-control" id="Item1" placeholder="description" value="{{item1}}" name="Item1" required>
        <span class="input-group-btn">
            <button class="btn btn-default btn-fill addField">
                <i class="fa fa-plus"></i>
            </button>
        </span>
      </div>
</div>

I try to read the value of the hidden input type with, which returns undefined:

    'click .addField':function(event){
        console.log($(event.currentTarget).closest('.imgRef').value);
    }

I am trying to get the value of a hidden input field using closest() but undefined is returned instead.

This is the html template:

<div class="content">
    <input type="hidden" value="ABC123" class="imgRef">

    <div class="input-group">
        <input type="text" class="form-control" id="Item1" placeholder="description" value="{{item1}}" name="Item1" required>
        <span class="input-group-btn">
            <button class="btn btn-default btn-fill addField">
                <i class="fa fa-plus"></i>
            </button>
        </span>
      </div>
</div>

I try to read the value of the hidden input type with, which returns undefined:

    'click .addField':function(event){
        console.log($(event.currentTarget).closest('.imgRef').value);
    }

• javascript
• jquery
• meteor

Share Improve this question Follow asked Feb 12, 2016 at 20:54 user94628user94628 3,7311818 gold badges5454 silver badges9090 bronze badges 2

• 1 Can you create a fiddle? – Draco18s no longer trusts SE Commented Feb 12, 2016 at 20:55
• 1 That doesn;t work that way. closest goes up (or down I believe) in the DOM tree.. going up from where you clicked isn't going to get the input you want. You need to find its parent and than do a .find('.imgRef') – putvande Commented Feb 12, 2016 at 20:55

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

.closest traverses up in the DOM. .imgRef isn't any of the parents from the object you are clicking. You need to select the parent of that object (which IS one of the parents from that object you click) and than .find('.imgRef').

Also, as @Daniel says in his answer, you need .val() instead of .value.

So :

console.log($(event.currentTarget).closest('.content').find('.imgRef').val());

See Fiddle

Here's what you want in order to do this by a relative path from your button, without having to add IDs.

     $('button').on('click', function(e) {
       var el = $(e.currentTarget).closest('.content').find('.imgRef').val();
       alert(el);
     });

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <input type="hidden" value="ABC123" class="imgRef">

  <div class="input-group">
    <input type="text" class="form-control" id="Item1" placeholder="description" value="" name="Item1" required>

    <button class="btn btn-default btn-fill addField">
      BUTTON
    </button>

  </div>
</div>

本文标签： javascriptJQuery closest() returns undefinedStack Overflow