title: prevent default not working in my javascript
body: <p>I have a script that I am using to hide and show different parts of a page. It's purpose is to step the user back and forth through the content when they click links. I need to keep all of this content on the same page, I can't break it into separate pages.</p>
  
  <p>So far, when the page loads, I'm able to hide and show what I want for Step One and then append a link that will take the user to Step Two.</p>
  
  <p>When Step Two shows and appends a link to go back to Step One, or go to Step Three, these links don't work. It appears that the prevent default action isn't working. When you click the links they go to he URL instead of showing step one or step three.</p>
  
  <p>Why is my link to step two working and not my links to step one and step three?</p>
  
  <pre><code>stepOne.show();
      stepOneTwo.show('fast', function() {
          stepOneTwo.append( z + '&lt;a href="#step2" style="color:white;"    id="step_2"&gt;GO TO NEXT STEP &gt;&gt;&lt;/a&gt;&lt;/div&gt;');
          });
  
              $("#step_2").click(function(e){ 
              e.preventDefault();
                   stepOne.hide(); 
                   stepOneTwo.hide(); 
                   stepTwo.toggle();
                   stepTwoTwo.show('fast', function() {
                   stepTwo.append(z + '&lt;a href="#step1" style="color:white;" id="step_1"&gt;BACK &gt;&gt;&lt;/a&gt;&lt;/div&gt;&lt;/br&gt;&lt;/br&gt;' + z + '&lt;a href="#step3" style="color:white;" id="step_3"&gt;GO TO NEXT STEP &gt;&gt;&lt;/a&gt;&lt;/div&gt;');
                  }); 
              }); 
  
              $("#step_1").click(function(e){ 
              e.preventDefault();
                  stepTwo.hide();
                  stepTwoTwo.hide();
                  stepThree.hide(); 
                  stepThreeTwo.hide();
                  stepThreeThree.hide();
                  stepThreeFour.hide();
                  stepFour.hide();
                  stepFourTwo.hide();
                  stepFourThree.hide();
                  k.hide();
                  stepOne.show();
                  stepOneTwo.show('fast', function() {
                  stepOneTwo.append( z + '&lt;a href="..." style="color:white;" id="step_2"&gt;GO TO NEXT STEP &gt;&gt;&lt;/a&gt;&lt;/div&gt;');
                  });
              });
  
              $("#step_3").click(function(e){ 
              e.preventDefault();
                   stepTwo.hide(); 
                   stepTwoTwo.hide(); 
                   stepThree.toggle();
                   stepThreeTwo.toggle();
                   stepThreeThree.toggle();
                   stepThreeFour.show('fast', function() {
                   stepThree.after(c + '&lt;a href="..."       style="color:white;" id="step_2"&gt;GO BACK &gt;&gt;&lt;/a&gt;&lt;/div&gt; &lt;/br&gt;&lt;/br&gt;' + c + '&lt;a href="..." style="color:white;" id="step_6"&gt;GO TO NEXT STEP &gt;&gt;&lt;/a&gt;&lt;/div&gt;');                                   
                  }); 
              }); 
  
  });     
  &lt;/script&gt;
  </code></pre>