JQuery - auf (‚Klick‘) funktioniert nicht mit Karten

Question

ich einige Code mit .html() schreibt, die eine html hat map area (es ist meine Abhilfe den Kartenbereich aktivieren/deaktivieren) kann

Ich arbeite mit jedem Live-Event (funktioniert mit einem Klick auf ein Bild), aber es funktioniert nicht mit Kartenbereich. Ich kann keinen Hinweis darauf finden, ich recherchierte und teste einige Wege, aber kein Ergebnis.

Mein var mit dem 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">'; 

mein letzter Versuch des Ereignisses (mit einer Warnung hier, um die Grundlagen gehen):

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

Nicht nützlich, aber das ist der Code, den ich verwende um das erste Erscheinen des html zu schreiben:

$("#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; 
      } 
     }); 

natürlich alles innerhalb des dom (auf Dokument bereit).

Wo ist mein Fehler? Jeder Hinweis oder Kommentar oder Antwort wird vorausgesagt. Testen im neuesten Mozilla und neuesten Chrome. Es funktioniert, wenn ich das HTML nicht dynamisch schreibe.

Answer 1

Das Einrichten der Klickbindung beim Laden einer Seite für ein Element, das noch nicht existiert, wird nicht funktionieren. Es wird nichts registriert, weil das Element nicht existiert!

Sie müssen einen Ereignishandler für ein Element registrieren, das beim Laden der Seite vorhanden ist, und wer ein Elternelement für das dynamisch erstellte Element ist.

Sehen Sie diese Antwort für Format/wie man: https://stackoverflow.com/a/1207393/5173105

Wenn #panel bei Laden der Seite vorhanden ist, und enthält das #B Element, dann vorgeschlagene Lösung:

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