web-dev-qa-db-fra.com

gestion de l'événement jQuery onClick sur le guidon

Je souhaite configurer un simple événement jQuery onClick pour rendre l'interface utilisateur dynamique sur un modèle de guidon. Je me demandais addClass () après un clic spécifique. 

considérer le HTML (généré par le guidon)

  {{#if hasButton}}
      <div id="container">      
          <button type="submit" class="myButton">Click me!</button>
      </div>
  {{/if}}

À savoir: après un clic sur un bouton, son conteneur recevra une classe de chargement qui créera l'interaction à l'aide de CSS.

$(".myButton").on("click", function(event){
        $(this).parent().addClass("loading");
});

Ce code devrait aller sur mon modèle de guidon ou devrais-je le réécrire dans une aide spécifique? Y a-t-il des exemples qui pourraient être fournis afin que je puisse l'étudier puis développer quelque chose de similaire?

Merci d'avance!

javascriptjqueryhandlebars.js
14
Hal

Vous devez actualiser vos écouteurs Jquery APRES l'insertion de noeuds dans votre DOM HTML.

var source   = "<li><a href="{{uri}}">{{label}}</a></li>";
var template = Handlebars.compile(source);
var context = {"uri":"http://example.com", "label":"my label"};
$("ul").append( template(context) );

// add your JQuery event listeners
$("li").click(function(){ alert("success"); });
14
Nicolas Delaforge

il n'est pas nécessaire de rattacher le gestionnaire d'événements à chaque mise à jour dynamique du DOM si vous les définissez au niveau du document:

$(document).on('click','li',function(){
   alert( 'success' );
});

J'espère que cela t'aides! :-)

39
murnax

Je ne suis pas sûr de savoir quel est exactement votre problème. Il en est de même si vous conservez votre code JavaScript dans un fichier * .js, perhaps à l'aide de parent () à la place de prev() dans ce cas précis.

0
glautrou