jQuery toggle question

Question

J'ai une question concernant l'utilisation de la fonction toggle. J'ai un modèle qui est rempli à la fin d'un appel AJAX avec des données renvoyées par un service Web. Ce que j'essaie d'accomplir est de charger la fonction onClick afin qu'une boîte de texte cachée soit montrée et basculée pour être cachée sur le clic suivant.

Ce qui se passe est que lorsque je clique sur le lien une fois que tout va bien la zone de texte affiche et se cache. Mais si je continue à cliquer sur le lien Modifier, la zone de texte affichera et masquera le nombre de fois que le lien a été cliqué (par exemple, je clique sur le lien pour la deuxième fois. fois, etc.).

Quelqu'un pourrait-il regarder mon code et m'aider?

Merci!

PS. J'essayais aussi de basculer le lien pour passer de "Modifier" à "Annuler" aussi; Je n'ai pas passé beaucoup de temps là-dessus mais si tu veux me jeter un os dessus aussi, je le prends! ;-)

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; 
     }); 
    }); 
} 

La structure des éléments référencés est:

<div> 
    <h4>${ProblemSubCategory}</h4> 

    <input id="text${ProblemSubCategoryID}" type="text" value=${ProblemSubCategory} class="scEditHide"/> 

    <a href="#" id="${ProblemSubCategoryID}" class="aEdit">Edit</a> 
    <a href="dummyWebservice.asmx\DeleteSC\${ProblemSubCategoryID}">Delete</a> 
</div> 

Answer 1

Pointy a raison de configurer le gestionnaire onClick. Ce que vous faites maintenant, c'est ajouter un nouveau gestionnaire (qui sera déclenché à chaque fois que vous cliquez) sur l'élément. De cette façon, la première fois que vous cliquez dessus, vous ajoutez un gestionnaire et lancez-le. La deuxième fois que vous cliquez, il ajoutera un autre gestionnaire, puis déclenchera celui-là et celui précédemment ajouté.

Vous devriez changer votre code pour quelque chose comme ceci.

function showSCs(data) { 
    $('#sometmpl3').tmpl(data.d) 
    .appendTo($('#subCats')) 
    .find(".aEdit") 
    .toggle(
     function() { 
      $(this).parent().find('.scEditHide').fadeIn(); 
      $(this).text("Cancel"); 
      return false; 
     }, 
     function() { 
      $(this).parent().find('.scEditHide').fadeOut(); 
      $(this).text("Edit"); //added: set text back to edit 
      return false; 
     } 
    ); 
} 

Answer 2

Vous multiplions la mise en place du gestionnaire « clic » encore et encore. L'appel .click()met en place le gestionnaire - vous avez juste besoin de le faire une fois.

Je pense aussi:

$(this).text = "Cancel" 

devrait être

$(this).text("Cancel"); 

mais je suis assez confus par votre code, donc je ne sais pas exactement quoi penser.