Ajouter un événement de clic à plusieurs éléments créés dynamiquement avec des classes correspondantes

Question

J'ai besoin de créer un événement de clic afin que lorsqu'un bouton créé dynamiquement est cliqué, une marque de vérification soit ajoutée à une case à cocher correspondante.

J'ai un groupe de boutons / cases à cocher créés dynamiquement comme ceci :

     Appliquer maintenant

J'ai également incorporé du JS pour que chaque bouton / case à cocher créé dynamiquement reçoive une classe correspondante (par exemple, le premier bouton recevra la classe '.job0' tandis que la première case à cocher recevra également la classe '.job0', le deuxième bouton / case à cocher sera '.job1' et ainsi de suite).

        //set unique classes for buttons and checkboxes
        var $buttonClass = $("#parent1 a");
        $buttonClass.attr('class', function (index) {
            return 'job' + index;
        });
        var $checkBoxClass = $("#parent2 input");
        $checkBoxClass.attr('class', function (index) {
            return 'job' + index;
        });

J'ai également ajouté du JS pour lier l'événement de clic aux boutons créés dynamiquement :

        $(document).on('click', 'a[class^="job"]', function() {
            console.log('élément cliqué');
        });

Quelle est la meilleure approche pour garantir que tous les boutons créés dynamiquement peuvent être cliqués et que la case à cocher correspondante soit cochée (une fois de plus, lorsque le bouton avec la classe '.job0' est cliqué, la case à cocher avec la classe '.job0' est cochée, et ainsi de suite pour chaque groupe d'éléments générés dynamiquement) ?

Answer 1

Je préférerais attribuer un attribut data-* au bouton et à l'entrée qui coïncident l'un avec l'autre avec la même valeur.

$(document).on('click', 'button[class^="job"]', function() {
  console.log('élément cliqué');
  var id = $(this).data('id')
  $(`input[data-id=${id}]`).prop('checked', true)
});

  Postuler maintenant

Si vous voulez basculer l'état coché en cliquant à nouveau sur le bouton.

$(document).on('click', 'button[class^="job"]', function() {
  console.log('élément cliqué');
  var id = $(this).data('id')
  var checked = $(`input[data-id=${id}]`).is(':checked')
  $(`input[data-id=${id}]`).prop('checked', !checked)
});

  Postuler maintenant