0

I am unable to access the input field or any of the dynamically created input fields from the following HTML:

<div class="row">
<div class="input_fields_wrap" id="Categories">
<button class="add_field_with_subs">Add More Categories</button>
<div class="input_fields"><input type="text" name="someInput"><a href="#" class="add_sub_field">Add Sub-Categories</a></div>
</div>
</div>

Using the following code gives the proper value of "2":

$("#Categories").children("div").each( () => alert($(this).children.length) );

and the alert will trigger appropriately for each dynamically created field...

However, any attempt to get the value of the appropriate input text field yields a response of "undefined".

I've tried .children("input"), .children(":input"), .last(), .find, etc.

Would anyone be able to advise me on what I'm doing incorrectly, please?

James
  • 25
  • 2
  • 7
  • Wouldn't `$(this)` be the child in that context and not the `div`? Your `input`'s don't have children. – zgood Dec 05 '17 at 18:16
  • @zgood - It would be if it weren't an arrow function. – T.J. Crowder Dec 05 '17 at 18:17
  • @T.J.Crowder ah ok got ya, I am not use to that syntax yet. Thought it was shorthand for an anonymous function – zgood Dec 05 '17 at 18:19
  • See the linked dupetarget for details, but basically: Don't use an arrow function for your `each` callback (or if you do, don't use `this`, use the second argument `each` passes it). So either `.each(function() { $(this)... })` or `.each((_, el) => { $(el)... })`. Also note that `children` on a jQuery object is a **function**, so `.children.length` should probably be `.children().length`. Finally, if you're looking for the inputs, consider `$("#Categories input").each(...)` which loops over the inputs inside `#Categories`. – T.J. Crowder Dec 05 '17 at 18:20

1 Answers1

1

children only traverse single level of DOM, use find instead

Make it

$("#Categories").find("input").each( function(){
   //your logic
});
gurvinder372
  • 66,980
  • 10
  • 72
  • 94
  • The `div`s in the question *are* direct children of `#Categories`. The problem is that the OP was using an arrow function. (I see you changed that, but didn't call it out.) – T.J. Crowder Dec 05 '17 at 18:19
  • @T.J.Crowder yes, idea was to reach each `input`. But I agree, this is not necessarily the issue with OP as it can work with children as well - `$("#Categories").children("div").find( "input" ).each()` – gurvinder372 Dec 05 '17 at 18:21
  • seems like it should be `$("#Categories").find("input[type=text]").each(function(i,j){ alert($(j).val()); });` – RohitS Dec 05 '17 at 18:23
  • 1
    Ah, yes, sorry. You're quite right, but if the goal is to find the `input`s, then simply `$("#Categories input")` would seem the most direct way. :-) – T.J. Crowder Dec 05 '17 at 18:23
  • @RohitS I am not sure if OP would like to remove other `input`s from the dom query. – gurvinder372 Dec 05 '17 at 18:24
  • @gurvinder372 i guess OP only need to access the value for dynamically added inputs so, also i just suggested in order to get values of each inputs he/she need to have it in closure function args.. :D – RohitS Dec 05 '17 at 18:28
  • thank you for the advice; I'll remove the arrow function. The reason I can not traverse inputs outright is that this is a form that allows sub-fields of each field; and when I AJAX the values, I need to leverage the hierarchical structure – James Dec 05 '17 at 18:32
  • @James SO has good amount of literature on *what is the difference between arrow functions and normal functions* and *when not to use arrow functions*. It might be good idea to search them and bookmark them :) – gurvinder372 Dec 05 '17 at 18:33