jQuery parent() function not working

Question

Consider the following HTML

<fieldset>
    <legend>FOO</legend>
    <div> <!-- this is not static code...it's generated by jQuery-->
        <input type="checkbox" id="chkBox" />
    </div>
</fieldset>

When I run this jQuery

console.log($("#chkBox").parent());

I get [Fieldset] instead of the expected [div]...and I have no idea why!?

EDIT: Just a quick point here...the <div> tag is being generated by jQuery...so in reality, the fieldset IS the parent (hard-coded)...so how would I get the dynamically created parent?

And I get the div -> [**FIDDLE**](http://jsfiddle.net/WBF6B/1/). Check for typos, unclosed elements etc. For instance `` ? — adeneo, Apr 03 '13 at 15:46
You didn't properly close your `legend` tag, you mispelled it. Probably messing up in whatever browser you're testing. — JaredMcAteer, Apr 03 '13 at 15:48
tested you example and it worked fine... are you sure that's the exact HTML you are having trouble with? — Naryl, Apr 03 '13 at 15:53
I think your are trying to read the fieldset's parent before you added the div. Sometimes js is tricky and maybe some code have been executed before the other, even if it seems otherwise. — Draykos, Apr 03 '13 at 15:55
@War10ck, your last comment solved the problem, so thank you very much! :-) add as answer and I will accept. — Matthew Layton, Apr 03 '13 at 16:01
@series0ne Glad to hear it buddy. It's been added as an answer below. Good luck and happy coding! — War10ck, Apr 03 '13 at 16:06

score 1 · Accepted Answer · answered Apr 03 '13 at 16:06

1

You mention the <div> tag is generated dynamically. If the checkbox is not generated dynamically as well, it will cause the added <div> tag to not properly wrap the checkbox.

View the content in Chrome's Inspect Element tool, or any other browser's equivalent (i.e. FireBug) and make sure the dynamically generated content alters the DOM to create the output you expect as you posted in your question above.

Hope this helps.

answered Apr 03 '13 at 16:06

War10ck

12,387
7
41
54

Excellent. My logic was a bit backward. it was performing the parent() operation before nesting the input tag into the div, hence, it was getting the fieldset as the parent. +1 and accepted. Thanks! – Matthew Layton Apr 03 '13 at 16:08
No problem buddy. Glad it worked for you. :) – War10ck Apr 03 '13 at 16:08

score 0 · Answer 2 · answered Apr 03 '13 at 15:48

0

There's a typo in your HTML

<legend>FOO</ledgend>

This could be causing parsing errors which means your DOM isn't what you think it is.

answered Apr 03 '13 at 15:48

tinyd

952
6
9

that was a typo on SO...not solving the issue. – Matthew Layton Apr 03 '13 at 15:51
See War10ck's comment...that solved the issue. – Matthew Layton Apr 03 '13 at 16:03
Fair enough - thanks! – tinyd Apr 03 '13 at 16:07

jQuery parent() function not working

2 Answers2