jQuery execution

Below is the source listing of a tutorial on construction sequential parts of a form using jQuery. In studying the tutorial I realized that there is a significant non understanding that I have of jQuery. The problem is the appearance and disappearance of the next and previous prompts in the first and last section of displaying the form. When I step through the code with a debugger, the debugger never hits either of these two functions,

yet the proper prompts appear. Can someone explain this? Thanks!
WBR

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>TUT</title>
        <script type="text/javascript" src='javascripts/jquery.js'></script>

/* To disable the appropriate button when we are on
                   the first or last step. */
                $('#first-step .prev').remove();
                $('#last-step .next').remove();

// show first step
                $('#first-step').show();

$('a.next').click(function(){
                    var whichStep = $(this).parent().parent().attr('id');

if( whichStep == 'first-step' ){
                        // validate first-step
                    }
                    else if( whichStep == 'second-step' ){
                        // validate second-step
                    }
                    else if( whichStep == 'last-step' ){
                        // validate last-step
                    }

$(this).parent().parent().hide().next().show();
                });

$('a.prev').click(function(){
                    $(this).parent().parent().hide().prev().show();
                });
            });
        </script>
    </head>

<body>

<h1>Camper Application Form</h1>

<p>Please use this online application form to register for camp.</p>
        <form id="camperapplicationForm" method="post" action="">

<div id="first-step">
                <h2>First Step</h2>
                <div>
                    <div class="label"><label for="Gender">Gender</label></div>
                    <select name="Gender" id="Gender">
                        <option value="" selected="selected"></option>
                        <option value="Male">Male</option>

<option value="Female">Female</option>
                    </select>
                </div>

<div>
                    <div class="label"><label for="Grade">Grade in Fall 2009</label></div>
                    <select name="Grade" id="Grade">
                        <option value="" selected="selected"></option>
                        <option value="K">K</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                    </select>
                </div>

</div>

<div id="second-step">
                <h2>Second Step</h2>
                <div class="label"><label for="Site">Site</label></div>
                <select name="Site" id="Site">

<option value="" selected="selected"></option>
                    <option value="Cross-View">Cross View (Main Site)</option>
                    <option value="Teepee-Village">Teepee Village</option>
                    <option value="Mission-Point">Mission Point</option>
                </select>
            </div>

<div id="last-step">
                <h2>Last Step</h2>
                <p>Please select one of the following payment methods.</p>
                <div>
                    <input type="radio" name="payment" id="payment0" value="Credit Card" /><label>Credit Card</label>
                </div>
                <div>
                    <input type="radio" name="payment" id="payment1" value="Cheque" /><label>Cheque</label>
                </div>

</form>
    </body>
</html>

William Rouse wrote:When I step through the code with a debugger, the debugger never hits either of these two functions

The two lines you show are part of the document-ready handler and cannot possibly not be called. I suspect your debugger isn't getting control until after they have executed.

After the page is plotted and someone is filling in the form on the second section, and then either moves forward to the third page, or backward to the first page, should not one of these functions be executed.
WBR

Why can't they be called? If I set a breakpoint on the remove() lines the breakpoint is hit (FF/Firebug).

It's working for me (although I'd argue against doing it like this).

I'm using the javascript debugger in Netbeans and I don't see it. I'll try learning enough of Firebug later and try it.
David Newton, how would you go about it?
Thanks!
WBR

Considering the low number of inputs I'd just put it all on one page. If there was some compelling reason to break it up I'd just use new pages. I don't feel the JS hide/show functionality adds anything.

If I *was* going to do it like this I'd figure out some way to make it less brittle. Seeing things like "$(this).parent().parent().hide().next().show();" tells me that it'll break at some point from an unrelated structural change--and if the person fixing it isn't the person that wrote it they'll be sad.

Oh, and always use "for" attributes on label tags :p

This is just a tutorial someone presented to show a concept and I learned from it.
I don't understand though, David what you mean by "label tags :p", where in the code is that?
Thanks!
WBR

I'm going to agree and disagree with David.

I prefer clarity over cleverness, so yeah, I wouldn't do things exactly this way. But this is from a tutorial where often "cleverness" is used just to get a concept across. Out of context, it's hard to tell.

I would not discount using dynamic elements, but again, I'd do it in a clearer fashion than is done here.

Also, the mere presence of long chains of jQuery commands isn't an issue -- in fact, it's one of jQuery's great strengths. But yes, I'd do things in a less fragile fashion. Long command chains aren't something to be avoided; just something to be sure to do well.

William Rouse wrote:what you mean by "label tags :p", where in the code is that?

There are label tags in the HTML markup. Some have for attributes, but some do not.

I'm not against train wrecks, but (largely) structural ones give me the willies. Being Smalltalkish I'm a big fan of chaining :)

David Newton wrote:but (largely) structural ones give me the willies.

Agreed. Too fragile for my tastes.