jQuery toggle question
<p>I have a question concerning using the toggle function. I have a template that is being populated at the end of an AJAX call with data returned from a web service. What I'm trying to accomplish is load the onClick function so that a hidden textbox will be shown and toggled to be hidden on the next click. </p>

<p>What's happening is that when I click the link once everything's fine the textbox shows and hides. But if I keep clicking the Edit link the textbox will show and hide the number of times that the link has been clicked (ie. I click the link for the second time it fadesIn/Out twice, the third time it fades In/Out 3 times, etc).</p>

<p>Would someone please look at my code and help me?</p>

<p>Thanks!</p>

<p>PS. I was also trying to toggle the link to go from "Edit" to "Cancel" as well; I haven't spent much time on that but if you want to throw me a bone on that too, I'll take it! ;-)</p>

<pre><code> function showSCs(data) {
   $('#sometmpl3').tmpl(data.d)
     .appendTo($('#subCats'))
     .find(".aEdit").toggle(function() {
       $(this).click(function() {
         $(this).parent().find('.scEditHide').fadeIn();
         $(this).text = "Cancel";

         return false;
       });
     }, function() {
       $(this).click(function() {
         $(this).parent().find('.scEditHide').fadeOut();

         return false;
       });
     });
 } 
</code></pre>

<p>The structure of the elements referenced is:</p>

<pre><code> &lt;div&gt; 
  &lt;h4&gt;${ProblemSubCategory}&lt;/h4&gt;

  &lt;input id="text${ProblemSubCategoryID}" type="text" value=${ProblemSubCategory}   class="scEditHide"/&gt;

  &lt;a href="#" id="${ProblemSubCategoryID}" class="aEdit"&gt;Edit&lt;/a&gt;
  &lt;a href="dummyWebservice.asmx\DeleteSC\${ProblemSubCategoryID}"&gt;Delete&lt;/a&gt;
&lt;/div&gt;
</code></pre>
