html - After use .load my jquery doesn't work on the div -
i don't understand why happening, weird. since i'm jquery novice may missing something. here code
<script type="text/javascript"> $(document).ready(function(){ $(".photos_container > a").mouseover(function() { $(this).fadeto("slow", 0.6); }).mouseout(function(){ $(this).fadeto("slow", 1); }); $('.pagination a').on('click', function(e){ e.preventdefault(); var link = $(this).attr('href'); $('.tab-pane.active').html('loading...'); $('.tab-pane.active').load(link+' .tab-pane.active > *'); }); }); </script>
html
<div class="photos_container tab-pane active" id="1"> <a href="javascript:void(0)" data-name="chameleon minds" data-photo-medium="http://localhost/site/wp-content/uploads/2013/04/chameleon-medium.png" data-title="art projects kids - status : client work"> <img class="thumb_image" src="http://localhost/site/wp-content/uploads/2013/04/final.png"> </a> <div class="pagination"> <a class="page-numbers" href="">1</a> <span class="page-numbers current">2</span> </div> </div>
without seeing html it's hard say, if .tab-pane.active
contains .pagination a
element initial click/mouseover events bound clobbered. can solve problem using event delegation (bind containing element not removed -- specific can).
$(document).on('click', ".pagination a", function (e) {
Comments
Post a Comment