J'ai un formulaire comme suit:

<form class="edit">
</form>

Lorsqu'un bouton d'édition est enfoncé, il ajoute une classe "active" au formulaire, par exemple:

<form class="edit active">
</form>

Je voudrais vérifier quand un utilisateur apporte des modifications à l'une des entrées du formulaire. Les oeuvres suivantes:

$('.edit').on('change', function () {
    console.log('works');
});

Mais je voudrais limiter l'événement à quand le formulaire est actif. J'ai essayé ce qui suit mais il ne tire pas:

$('.edit.active').on('change', function () {
    console.log('fails');
});

$('.edit').on('change', '.active', function () {
    console.log('fails');
});

Dois-je faire quelque chose de différent pour vérifier les classes ajoutées dynamiquement?

0
xylar 6 nov. 2019 à 17:18

4 réponses

Qu'en est-il de l'instruction if vérifiant s'il existe une classe "active". Ce serait peut-être une bonne idée.

Quelque chose comme :

$('.edit').on('change', function () {
    if ($YourEditFormElement).hasClass('active')) {
        console.log('It works!');
    }
 });

Donner un coup de feu

0
AdamKniec 6 nov. 2019 à 14:26
$('.edit').on('change', function () {
    if ($(this).hasClass('active')) {
        console.log('works');
    }
 });
0
CaeSea 6 nov. 2019 à 14:23

Vous pouvez utiliser un document pour l'ajouter dynamiquement à une page:

$ (document) .on (événements, sélecteur, données, gestionnaire);

$(document).on('change','.edit.active', function () {
    console.log('fails');
});
0
Sandip 6 nov. 2019 à 16:19

Il existe plusieurs façons de procéder:

Vous pouvez effectuer if condition et utiliser .hasClass pour vérifier, comme ceci:

$('.edit').on('change', function () {
   if ($(this).hasClass("active")) {
       console.log('Active');
   } else {
       console.log('Not Active');
   } 
});

Vous pouvez également écrire une syntaxe différente comme celle-ci, mais ici vous ne dépendez pas de la classe edit

$('.active').on('change', function () {
     console.log('Active');
});

Autrement :

$('form.active').on('change', function () {
     console.log('Active');
});

Manière plus spécifique:

$('form[class="edit active"]').on('change', function () {
     console.log('Active');
});

Par ailleurs, si vous ajoutez dynamiquement la classe active, cette action change ne prendra pas effet, vous devez écrire votre code de cette façon:

$(document).on("change",".active",function(){
      console.log('Active');
}); 

Vous pouvez l'appliquer à toutes les méthodes ci-dessus.

0
Ahmed Tag Amer 6 nov. 2019 à 14:32