JQuery - sur (clic) ne fonctionne pas avec coin carte

Question

J'écris un code avec .html() qui a un html map area (c'est ma solution de contournement pour activer/désactiver la zone de la carte)

Je peux travailler avec n'importe quel événement en direct (Fonctionne avec cliquez sur une image) mais cela ne fonctionne pas avec la zone de la carte. Je ne trouve aucun indice à ce sujet, j'ai fait des recherches et testé plusieurs façons, mais aucun résultat.

Mon var avec le code html:

var mapImage = '<map name="image-map"><area target="" href="#" alt="" title="" id="s" coords="55,109,130,220" shape="rect"><area target="" href="#" alt="" title="" id="b" coords="135,108,205,222" shape="rect"><area href="#" target="" alt="" title="" id="w" coords="213,109,296,223" shape="rect"><area href="#" target="" alt="" title="" id="n" coords="303,91,387,225" shape="rect"><area href="#" target="" alt="" title="" id="r" coords="58,223,131,323" shape="rect"><area href="#" target="" alt="" title="" id="l" coords="133,224,210,322" shape="rect"><area href="#" target="" alt="" title="" id="t" coords="215,225,293,324" shape="rect"><area href="#" target="" alt="" title="" id="g" coords="303,229,387,324" shape="rect"><area href="#" target="" alt="" title="" id="p" coords="540,96,686,217" shape="rect"><area href="#" target="" alt="" title="" id="b" coords="515,229,583,320" shape="rect"><area href="#" target="" alt="" title="" id="k" coords="594,225,679,322" shape="rect"><area href="#" target="" alt="" title="" id="x" coords="7,350,4,298,50,304,52,326,392,327,391,301,508,300,509,323,685,325,684,299,735,299,757,291,756,354" shape="poly"></map>'; 
      var mainImage = '<img id="panel" src="imgs/main1.png" width="760" height="360" class="img-responsive img-thumbnail" alt="Responsive image" usemap="#image-map">'; 

ma dernière tentative de l'événement (aller à l'essentiel avec une alerte ici):

$("#b").on('click', function (e) { 
     e.preventDefault(); 
     alert('test'); 
    }); 

Pas utile, mais c'est le code que j'utilise pour écrire le premier appereance du html:

$("#panel").on('click', function() { 
      switch (panel) { 
       case 0: 
        $("#maindiv").html(mainImage + mapImage).promise().done(function() { 
         $('#panel').attr("src", "imgs/day_off.png"); 
         panel = 1; 
        });; 

        break; 
      } 
     }); 

bien sûr tout dans le dom (sur document prêt).

Où est mon erreur? Tout indice, commentaire ou réponse sera prisé. Test dans Mozilla dernier, et dernier Chrome. Cela fonctionne si je n'écris pas le html dinamically.

Answer 1

La définition de la liaison de clic lors du chargement de la page pour un élément qui n'existe pas encore ne fonctionnera pas. Il n'enregistrera rien car l'élément n'existe pas!

Vous devez enregistrer un gestionnaire d'événements sur un élément qui existe au chargement de la page et qui est un parent sur l'élément créé dynamiquement.

Voir cette réponse pour le format/comment: https://stackoverflow.com/a/1207393/5173105

Si #panel existe à la page charge et contient l'élément #B, solution alors proposée:

$("#panel").on('click', '#b', function (e) { 
    e.preventDefault(); 
    alert('test'); 
});