JQuery on('click') 不适用于地图区域

Question

我正在用 .html() 编写一些代码，其中有一个 html map area（这是我 enable/disable 地图区域的解决方法）

我可以处理任何实时事件（单击图像即可处理），但不适用于地图区域。我找不到任何关于此的提示，我研究并测试了几种方法但没有结果。

我的变量 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">';

我最后一次尝试活动（在这里提醒一下基础知识）：

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

没有用，但这是我用来编写 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;
            }
        });

当然 dom 里面的所有内容（文档准备就绪）。

我的错误在哪里？任何提示或评论或答案将不胜感激。在最新的 Mozilla 和最新的 Chrome 中进行测试。如果我不动态地写 html 它会起作用。

Answer 1

为尚不存在的元素设置页面加载时的点击绑定将不起作用。它实际上不会注册任何东西，因为该元素不存在！

您将需要在页面加载时确实存在的元素上注册一个事件处理程序，并且谁是动态创建的元素的父元素。

请参阅 format/how 的答案：

如果#panel 在页面加载时存在并且包含#b 元素，那么建议的解决方案：

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

JQuery on('click') 不适用于地图区域

JQuery on('click') doesn't work with map area

javascript

html

jquery

jquery-events

live