javascript - Trying to attach JQuery on another page attached through data attribute -
i have slider attaches slides through external page attached through data attributes.
here what's happening:-
main page
<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 dom ready $('.internalclick').click(function(e) { alert("i clicked area tag" + $(this).attr('data-direct')); }); }); </script>
slides page (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>
problem
now above works fine when try add click function on 2 list elements (slides) in slides page. notice first added href="#" class="internalclick" data-direct="i-need-to-direct"
. problem access it.
when trying run small click function in main page, unable run function. idea how can make click function scopes area tag in slides page?
thanks
the problem internalclick
loaded after add event handlers. need use event delegation.
$("#sitewrapper").on("click",".internalclick", function(e) { var direct = $(this).data("direct"); console.log(direct); });
Comments
Post a Comment