Explication de 'l'événement bind to click' avec la portée

Question

J'ai un problème this, mais en résumé: j'ai une fonction d'auto-appel (function TCC() {...})(); qui génère deux sections d'éléments, entre autres choses. Ces éléments sont générés avec la classe btn. Une autre fonction JQuery de $('.btn').click(function() {...}; [avec un fichier console.log()] approprié indique que tous les éléments de la page avec la classe btn sont en cours de clic, à l'exception des éléments des deux sections susmentionnées.

Un commentaire suggère « Le problème se produit parce que vous liez l'événement click, avant le « générateur de bouton colonne, et une proposition de solution de » boucle ».:

$.each(cols, function(i) {...}).done(function(){ //Add click event handler now }); 

première question est quelqu'un peut-il élaborer sur ' parce que vous liez l'événement click, avant la boucle du "générateur de bouton de colonne".

La deuxième question concerne la solution proposée. Depuis que j'ai deux lignes de code distinctes pour la génération, et le bloc $('btn').on('click', function() {...}); est plus de 50 lignes, comment implémenter une solution sans dupliquer les lignes de code, comme je suppose que la méthode .done() l'exigerait. La page en question est here.

• La structure de portée actuelle du code de génération par rapport au .on('click') est comme suit (désolé pour pic, mais StackOverflow n'a pas aimé la mise en forme pour une raison quelconque):

  

Est-ce que l'étendue des lignes de code de génération agit de la sorte, et si oui, puis-je les retirer de la fonction auto-appelante pour corriger l'événement 'bind to click' dont parle la suggestion?

J'apprécie votre aide et votre expertise, en apprenant la programmation à partir de zéro, ces types de leçons de structure sont souvent laissés de côté des outils d'apprentissage en ligne souvent inclus dans les manuels.

Answer 1

Vous devriez vraiment avoir posté le code actuel. Mais peu importe. Je pense que le seul problème pour lequel vos événements click ne sont pas appelés, c'est que vous avez utilisé une syntaxe incorrecte.

Le on function de jQuery, a la syntaxe suivante -

HTML

<div class='button_container'> 
    <button> This is a button</button> 
    <button> This is a button</button> 
</div> 

JavaScript

$('.button_container').on('click', 'button', function(){ 
    console.log('I have been clicked!'); 
}); 
//Note the the second selector 'button' within the declaration 

Puisque la fonction on remplace essentiellement la live et delegate fonctions, le gestionnaire est maintenant défini pour tous les boutons dans div.buttons, indépendamment de quand et comment il a été créé (ce qui signifie dynamiquement créé). Cela peut être un peu trompeur.

Si vous faites une sélection simple du genre

$('button').on('click', function(){ /* do something **/ }) 

jQuery suppose que vous parlez d'événement liaison directe - i.e., l'élément dom est déjà chargé.Cela n'affecte pas les éléments créés dynamiquement (attention, si vous attachez les liaisons après le code de création, cela fonctionnera toujours sur ces éléments, car ils sont déjà présents dans le DOM).

Sauf si vous fournissez le second sélecteur, c'est le comportement par défaut. C'est un peu déroutant, mais on continue. Si vous voulez cibler ces éléments avant de les créer réellement, faites quelque chose de ce genre

//Right syntax 
$(document).on('click','button', function(){ /* do something **/ }) 
//This will bind to all buttons