jQuery ne fonctionne pas avec les éléments créés après le chargement du document

J'ai créé deux éléments dinamically avec jQuery:

une photo
et un bouton de fermeture

J'ai écrit le code pour supprimer à la fois dans doument.prêt de la fonction:

$( ".deletepreview" ).click(function() {
    code = $(this).data("prevcode");
    $('#'+code).remove();
    $(this).remove();
});

Mais ça ne fonctionne pas, et je pense que c'est parce que le code n'a pas de recherche dans le code créé après le document de la charge.

Comment puis-je résoudre ce problème?

source d'informationauteur dkapa

  1. 28

    Vous devez utiliser délégué événements par l'intermédiaire de () si vous voulez événements à gérer de façon dynamique des éléments ajoutés:

    $(document).on("click", ".deletepreview",function() {
  var code = $(this).data("prevcode");
  $('#'+code).remove();
  $(this).remove();
});

    J'ai légèrement modifié ton exemple: toujours déclarer les variables avec var dans les fermetures, sauf quand vous en avez besoin.

  2. 8

    Pour créer dynamiquement des éléments essayez d'utiliser la délégation avec les on comme:

    Les gestionnaires d'événements sont liés uniquement pour les éléments sélectionnés; ils
    doit exister sur la page au moment de votre code fait l'appel .sur().
    Pour s'assurer que les éléments sont présents et peuvent être sélectionnés, effectuez événement
    la liaison à l'intérieur d'un document prêt gestionnaire pour les éléments qui sont dans le
    Balisage HTML sur la page. Si le HTML est injecté dans la page,
    sélectionnez les éléments et les attacher des gestionnaires d'événement après le nouveau code HTML est
    placé dans la page. Ou, utilisez les délégués des événements pour attacher à un événement
    gestionnaire, comme décrit par la suite.

    Délégué événements ont l'avantage qu'ils peuvent traiter les événements de
    descendant des éléments qui sont ajoutés au document à une date ultérieure. Par
    cueillette à un élément qui est garanti pour être présent au moment de l'
    délégué du gestionnaire d'événement est raccordé, vous pouvez utiliser délégué événements
    éviter de recourir fréquemment à installer et à enlever les gestionnaires d'événements. Cette
    élément pourrait être l'élément conteneur de vue dans un
    Modèle-Vue-Contrôleur de conception, par exemple, ou d'un document si l'événement
    gestionnaire veut surveiller tous les événements de propagation dans le document. L'
    l'élément de document est disponible dans l'en-tête du document avant de
    le chargement de tous les autres HTML, de sorte qu'il est sûr de joindre des événements sans
    d'attente pour que le document soit prêt.

    Code:

    $('body').on('click', '.deletepreview', function() {
  var code = $(this).data('prevcode');
  $('#'+code).remove();
  $(this).remove();
});