I've always considered myself pretty proficient in jQuery, but this particular issue has me stumped. Essentially, I have a click event that should hide one DIV (a placeholder) and show two others (an input section and control buttons section). However, when I attempt to change the main displayed DIV by clicking on one of the control buttons (which involves hiding all DIVs and showing the desired one), the hide() function doesn't seem to work as expected.
It's a bit tricky to articulate, so I've created a jsFiddle to demonstrate the problem: jsFiddle
In the jsFiddle, the intended behavior is for clicking "CLICK ME" to arrange the DIVs correctly. Subsequently, clicking on boxes 1, 2, or 3 should change the text to "Item 1," "Item 2," or "Item 3." However, you'll notice that the "Item 1" DIV isn't hidden because it was initially shown during setup. Commenting out line #5 in the JavaScript resolves the issue, although it compromises the initial layout (I prefer "Item 1" to be displayed by default).
Of course, this example is greatly simplified compared to my actual project.
Has anyone encountered this issue before and determined its cause?
Here's some code:
HTML:
<div id="newinput">
<div class="inputmode">
<div class="placeholder">CLICK ME</div>
<div class="modeitem item1">Item 1</div>
<div class="modeitem item2">Item 2</div>
<div class="modeitem item3">Item 3</div>
</div>
<div class="controls">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
JavaScript:
$('#newinput').click(function () {
var im = $(this).children('.inputmode');
var ph = im.children('.placeholder').html();
im.children('.placeholder').hide();
im.children('div.item1').show();
$(this).children('.controls').show();
});
$('#newinput .controls .item').click(function () {
var item = 'item' + $(this).html();
var im = $('#newinput').children('.inputmode');
im.children('div').hide();
im.children('.modeitem.' + item).show();
});