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

【问题标题】：JQuery on('click') doesn't work with map areaJQuery on('click') 不适用于地图区域
【发布时间】：2017-08-23 01:18:45
【问题描述】：

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

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

我的 var 与 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，它就可以工作。

【问题讨论】：

标签： javascript html jquery jquery-events live

【解决方案1】：

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

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

请参阅此答案以了解格式/如何：https://stackoverflow.com/a/1207393/5173105

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

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

【讨论】：