0

我使用 Jvectormap 并使用 onRegionClick 函数使用 .html() 打开一个新 div

地图：

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 组成。

滑块（与地图相同的 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(function) 包含函数，并通过 $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) 将整个滑块加载到新的 div 中，

  • 试图将滑块放在单个脚本中并通过 $getScript()、ajax 等加载它。

但似乎没有任何效果

我几乎尝试了所有方法，但无法找到完成这项工作的最佳方法。让滑块在 .html(div) 标记内运行似乎是不可能的，我不确定这是否可能是由于不同脚本之间的冲突，是我错过了回调还是根本不可能。

提前感谢您的帮助！

4

0 回答 0