Comment passer une variable d'espace de noms dans la variable param de la fonction click? jQuery

Question

J'ai donc trouvé un awesome solution pour contourner le besoin d'utiliser des variables globales dans jQuery ici. Partout où je dis espace de noms, à l'origine j'allais utiliser un var global.

Cependant, je ne peux pas envoyer ma variable d'espace de noms via un param sur une simple fonction de clic.

Je veux faire cela parce que j'ai ces variables qui doivent être enregistrées et utilisées pour créer des fenêtres modales ainsi que pour faire savoir à l'application quels boutons créés dynamiquement contrôlent ce modal.

donc ci-dessous un exemple de mon objet d'espace de noms où je crée d'abord les variables Mon objet espace de noms jQuery:

$.reg = { 
    masterRole : " ", 
    role_ID : " ", 
    row_Name : " ", 
    ary_Check_Role : [] 
}; 

$(document).ready(function() { 
    ... 

Comme vous passez par l'application des valeurs pour les variables d'espace de noms se définir lorsque vous cliquez sur ce bouton (grappins données de HTML) Les variables sont définies sur ma fonction roleBtnClicked

function roleBtnClicked(event){ 

    $.reg.masterRole = $(this).html();   /* Get role name: Actor */ 
    $.reg.role_ID  = $(this).attr('role');  /* Get role-1 */ 
    $.reg.rowName  = $(this).attr('row');  /* Get row-role-1 */ 
    $.reg.blueBtn  = $(this).attr('blue');  /* Get blue-btn-1 */ 

maintenant une fenêtre modale apparaît, après avoir cliqué sur quelques cases à cocher et pousser les données dans un tableau, lorsque vous cliquez sur le bouton fait (ci-dessous) toutes les variables doivent être sauvegardées dans les vars de l'espace de noms à nouveau.

Mon bouton clic fait fonction, où je suis en train de passer mes variables d'espace de noms via param vars

$(".doneButton").click(
    { 
     param1: $.reg.masterRole, 
     param2: $.reg.role_ID, 
     param3: $.reg.rowName, 
     param4: $.reg.ary_Check_Role 
    }, 
    doneBtnClicked); 

function doneBtnClicked(event){ 
    alert('$.reg.roleName = '+$.reg.roleName); 
    alert('event.data.param1 = '+event.data.param1); 

    masterRole= event.data.param1; 
    role_ID = event.data.param2; 
    rowName = event.data.param3; 
    ary_Check_Role = event.data.param4; 

---

Notez les 2 alertes ci-dessus dans la fonction de clic, le premier affiche le bon valeur, mais le 2ème n'affiche rien. Aussi Avoir un problème pour faire passer le tableau aussi.

Donc, des questions: Devrais-je le faire de cette façon? Comment passez-vous correctement un tableau dans un espace de noms jQuery, puis passez-le à un paramètre de fonction click?

Answer 1

Tout d'abord, vous devriez éviter de mettre des choses dans l'objet jQuery. Utilisez des fermetures pour cela. Deuxièmement: Vous devez utiliser les attributs HTML data-... et jQuery data() pour joindre des propriétés personnalisées aux éléments HTML. Évitez d'utiliser des propriétés non standard. Troisième: Vous pouvez utiliser peut utiliser des définitions de fonctions nommées distinctes pour les gestionnaires d'événements, mais il est plus logique lorsque vous réutilisez réellement ces fonctions pour différents éléments dans votre code (vous ne semblez pas faire cela). L'utilisation de fonctions anonymes que vous passez directement à .click(), par exemple, donne un code plus compréhensible.

// use this shorthand instead of $(document).ready(function() { ... }); 
$(function() { 

    // variable reg will be available to all functions 
    // defined within this outer function. This is called a closure. 
    var reg = { 
    masterRole : " ", 
    role_ID : " ", 
    row_Name : " ", 
    ary_Check_Role : [] 
    }; 

    $(".roleButton").click(function (event) { 
    // modify state 
    reg.masterRole = $(this).html();   /* Get role name: Actor */ 
    reg.role_ID  = $(this).data('role');  /* Get role-1 */ 
    reg.rowName  = $(this).data('row');  /* Get row-role-1 */ 
    reg.blueBtn  = $(this).data('blue');  /* Get blue-btn-1 */ 

    // note that this requires markup like this: 
    // <button data-role="foo" data-row="bar" data-blue="baz"> 

    // ... 
    }); 

    $(".doneButton").click(function (event) { 
    // debug output 
    alert(JSON.stringify(reg, 2, 2)); 
    }); 

}); 

Utiliser plusieurs blocs $(function() { ... }); pour séparer les choses qui devraient être séparés. N'oubliez pas de toujours utiliser var pour chaque variable déclarée. Les variables déclarées sans var seront globales - et vous ne voulez pas de variables globales.