title: Changing .click(function() { of an element using jQuery
body: <p>I have a group of clickable images which designate specific services offered. When a user clicks an image the form associated with that service slides into the frame. All forms are multi-part and subsequent parts are accessed via a clickable div (like a 'CONTINUE' button). All forms begin with 'Step1' and subsequent parts vary depending on the service selected.</p>
  
  <p>What I am trying to do is change the <code>.click (function()</code> of the 'CONTINUE button' based on the service selected.</p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;div class="form-holder"&gt;
  &lt;form id="inquiry" action="" method="" enctype="multipart/form-data"&gt;
  
  &lt;div class="select"&gt;
  &lt;p&gt;Please select a service from the options below:&lt;/p&gt;
  
  &lt;div id="service1"&gt;&lt;img class="product_img" src="" alt=" " /&gt;
  &lt;h1 style="margin-top: 0px"&gt;SERVICE ONE&lt;/h1&gt;&lt;/div&gt;
  
  &lt;div id="service2"&gt;&lt;img class="product_img" src="" alt="" /&gt;
  &lt;h1&gt;SERVICE TWO&lt;/h1&gt;&lt;/div&gt;
  
  &lt;/div&gt;&lt;!--End Select--&gt;
  
  &lt;div id="step1"&gt;
  
  &lt;fieldset id="field1"&gt;
  &lt;legend&gt;Contact Information&lt;/legend&gt;
  
  &lt;div class="inline"&gt;
  &lt;div&gt; Company Name:&lt;br /&gt;
  &lt;input name="Company Name" size="20" type="text" /&gt;&lt;/div&gt;
  
  &lt;div&gt;Contact Person: &lt;br /&gt;
  &lt;input name="Contact Person" size="20" type="text" /&gt;&lt;/div&gt;
  
  &lt;div&gt; Title/Affiliation: &lt;br /&gt;
  &lt;input name="Affiliation" size="20" type="text" /&gt;&lt;/div&gt;&lt;/div&gt;
  
  &lt;/fieldset&gt;
  
  &lt;div id="next1" class="next1"&gt;CONTINUE&lt;/div&gt;
  
  &lt;/div&gt;&lt;!--End Step1--&gt;
  
  
  
  &lt;div id="step2"&gt;
  
  &lt;fieldset&gt;
  &lt;legend&gt;Company Information&lt;/legend&gt;
  
  &lt;div class="inline2"&gt;
  &lt;div&gt; Products/Services:&lt;br /&gt;
  &lt;textarea id="inline" name="Products"&gt;&lt;/textarea&gt;&lt;/div&gt;
  
  &lt;div&gt; Affiliations/Licensing: &lt;br /&gt;
  &lt;textarea id="inline" name="Licenses"&gt;&lt;/textarea&gt;&lt;/div&gt;&lt;/div&gt;
  
  &lt;/fieldset&gt;
  
  &lt;div class="next2"&gt;CONTINUE&lt;/div&gt;
  
  &lt;/div&gt;&lt;!--End Step2--&gt;
  
  
  
  &lt;div id="step3"&gt;
  
  &lt;fieldset&gt;
  &lt;legend&gt;Design Goals&lt;/legend&gt;
  
  &lt;div class="inline2"&gt;
  &lt;div&gt;
  &lt;textarea id="inline" name="Examples"&gt;&lt;/textarea&gt;&lt;/div&gt;
  &lt;div&gt;
  &lt;textarea id="inline" name="Features"&gt;&lt;/textarea&gt;&lt;/div&gt;&lt;/div&gt;
  
  &lt;div&gt;Additional Information :&lt;br /&gt;
  &lt;textarea id="full" name="Comments"&gt;&lt;/textarea&gt;&lt;/div&gt;
  
  &lt;/fieldset&gt;
  
  &lt;input id="send" type="submit" value="Sumit Query"&gt;&lt;input type="reset" value="Clear" style="margin-left: 490px" /&gt;
  
  &lt;/div&gt;&lt;!--End Step3--&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>And here's the jQuery:</p>
  
  <pre><code>$(document).ready(function() {
  $("#service1").click(function() {
  $(".select").animate({width:"0%"}, 1000);
  $("#step1").animate({width:"77%"}, 1000);
  });
  });
  
  
  $(document).ready(function() {
  $(".next1").click(function() {
  $("#step1").animate({width:"0%"}, 1000);
  $("#step2").animate({width:"77%"}, 1000);
  });
  });
  
  $(document).ready(function() {
  $("#service2").click(function() {
  $(".select").animate({width:"0%"}, 1000);
  $("#step1").animate({width:"77%"}, 1000);
  $("#next1").addClass('next2').removeClass('next1');
  });
  });
  
  $(document).ready(function() {
  $(".next2").click(function() {
  $("#step1").animate({width:"0%"}, 1000);
  $("#step3").animate({width:"77%"}, 1000);
  });
  });
  </code></pre>
  
  <p>The goal is to change the class of <code>"#next1"</code> when <code>"#service2"</code> is selected so it will animate #step3 of the form rather than <code>"#step2"</code>. </p>
  
  <p>Is this possible? </p>
  
  <p>I'm fairly new to jQuery and can use all the help I can get. Thanks in advance for any help you can offer.</p>
  
  <p>M.J.</p>