Question

我正在使用.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，那就行了。

Answer 1

为页面加载设置不存在的元素的点击绑定但仍然无法正常工作。它实际上没有注册任何东西，因为元素不存在！

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

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

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

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

JQuery - on（＆＃39;点击＆＃39;）不适用于地图区域

1 个答案: