JQuery on(‘click’) doesn’t work with map area

I’m writing some code with .html() that has a html map area (it’s my workaround to enable/disable the map area)

I can work with any live event (works with on click on an image) but it doesn’t work with map area. I can’t found any hint about this, I researched and test some several ways but no-result.

My var with the 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">';

My last attempt of the event (go to the basics with an alert here):

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

Not useful but this is the code I use to write the first appearance of the 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;
            }
        });

of course everything inside the dom (on document ready).

Where is my error? Any hint or comment or answer will be appreciated. Testing in latest Mozilla, and latest Chrome. It works if I do not write the html dynamically.

Answer

Setting up the click binding on page load for an element that doesn’t exist yet won’t work. It won’t actually register anything because the element doesn’t exist!

You will need to register an event handler on an element that does exist at page load, and who is a parent on the dynamically created element.

See this answer for format/how to: https://stackoverflow.com/a/1207393/5173105

If #panel exists at page load and contains the #b element, then suggested solution:

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

Advertisement

Answer