我正在使用Jvectormap并使用onRegionClick函数使用.html()
打开一个新的divMAP:
onRegionClick: function(event, code){
var map = $('#map1').vectorMap('get', 'mapObject');
nation = map.getRegionName(code);
quest = getQUEST('1');
$('.map').html( '<div id="slideshow">SLIDER GOES HERE</div>');
$(".map").slideToggle("slow");
新创建的div Id内部喜欢显示由多个脚本组成的滑块(bxslider), 一个功能, 和一个css。
Slider(与地图相同的jquery版本):
<script src="map/tests/assets/jquery-1.10.2.js"></script>
<!-- bxSlider Javascript file -->
<script src="slider/jquery.easing.1.3.js"></script>
<script src="slider/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="slider/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">$(document).ready(function(){
$('.bxorga').bxSlider({
captions: true,
auto: true,
});
});
</script>
我的第一种方法是使用.html(函数)和脚本通过$ getScript()包含函数(见下文):
$( ".map" ).html('<div id="slideshow"><ul class="bxorga"><li><img src="../images/pic1.jpg" width="700" height="250" /></li><li><img src="../images/pic2.jpg" width="700" height="250" /></li></div></div>')
$.getScript("slider/jquery.bxslider.min.js");
$('.map').html(function() {
$(document).ready(function(){
$('.bxorga').bxSlider({
captions: true,
auto: true,
然而,没有成功。
我进一步尝试
通过.load(#div)
尝试将滑块放在单个脚本中并通过$ getScript加载它 (),ajax等。
但似乎没什么可行的
我已经尝试了几乎所有的东西但是无法理解这个完成任务的最佳方法。似乎不可能让滑块在.html(div)标签内部运行,我不确定这是否可能是由于不同脚本之间的冲突,Iam错过了回调或者是否根本不可能。
先谢谢你的帮助!