尝试将JQuery附加到通过数据属性附加的另一个页面上

Question

我有一个滑块，可以通过数据属性附加的外部页面附加幻灯片。

以下是发生的事情： -

主页

<div id="sitewrapper">
    <section class="sliderwrapper">
        <div id="slider" data-source="slides-page.html" data-speed="500" data-easing="swing">
            <ul>

            </ul>
        </div>
        <div id="loader"><span id="load"></span></div>
        <a class="button" id="back"></a>
        <a class="button" id="next"></a>
    </section>
<!--end sitewrapper-->
</div>

<script>
    $(function() { //run when the DOM is ready
   $('.internalclick').click(function(e) {
       alert("I clicked Area Tag" + $(this).attr('data-direct'));
      });

    });
</script>

幻灯片页面（slides-page.html）

    <li class="hslide" data-id="1"><img src="content/01.png" usemap="#Map">
      <map name="Map">
        <area shape="rect" coords="331,158,538,297" href="#" class="internalclick" data-direct="I-need-to-direct">
        <area shape="rect" coords="546,154,745,305" href="#">
        <area shape="rect" coords="331,311,543,445" href="#">
        <area shape="rect" coords="550,309,733,443" href="#">
      </map>
    </li>
    <li class="hslide" data-id="2"><img src="content/02.png"></li>
    <li class="hslide" data-id="3"><img src="content/03.png"></li>
    <li class="hslide" data-id="4"><img src="content/04.png"></li>

问题

现在，当我尝试在幻灯片页面中的两个列表元素（幻灯片）上添加Click功能时，上述工作正常。请注意我添加href="#" class="internalclick" data-direct="I-need-to-direct"的第一个地方。现在的问题是访问它。

当我尝试在主页面中运行一个小的Click功能时，我无法运行该功能。知道我怎么能在幻灯片页面中制作一个范围区域标签的点击功能吗？

由于

Answer 1

添加事件处理程序后，问题是internalclick已加载。您需要使用事件委派。

$("#sitewrapper").on("click",".internalclick", function(e) { 
    var direct = $(this).data("direct");
    console.log(direct);
});