Colorbox不适用于jvectormap

Question

我试图通过点击一个国家来打开一个颜色盒，但是它不起作用。

html：

....
<div class="row">
   <div class="col-md-12 text-center">                
     <div id="world-map"></div>
     <span class="test">test</span>
   </div>
</div>
....

<!--colorbox content inline -->
<div style='display:none'>
    <div id='inline_content' style='padding:10px; background:#fff;'>
         <p><strong>Content</strong></p>                
    </div>
</div>
...

js：

...

$('#world-map').vectorMap({
               map: 'world_mill',               
               series:{
                   regions:[{
                       values: countries                                                                     
                   }]
               },                
               backgroundColor: "#ffffff",
               zoomOnScroll: false,
               zoomButtons: !1,
               regionStyle: {
                    initial: {
                        fill: "#c2e1f8"
                    },
                    hover: {
                        fill: hover_color,
                        "fill-opacity": 1
                    }
                },
                markerStyle: {
                    initial: {
                        fill: "#000",                        
                        stroke: "#fff"                        
                    },
                    hover:{                        
                        stroke:"#fff"
                    }
                },                             

                onRegionTipShow:function(e, tip, code){                    

                    if ( $.inArray(code, all_countries) == -1 ){                        
                        e.preventDefault();                        
                    }                      
                },
                onRegionOver:function(e, code){                    


                    if ( $.inArray(code, all_countries) == -1  ){                        
                        e.preventDefault();                        
                    }  

                }

           });   




$(".jvectormap-region").colorbox({
                                   inline:true,
                                   href:"#inline_content",
                                   width:"50%"
                        });

我也尝试了一下，它是有效的：

$(".test").colorbox({
                                   inline:true,
                                   href:"#inline_content",
                                   width:"50%"
                        });

我认为这不适用于$(".jvectormap-region")，因为映射区域是动态创建的，我不太确定。

我能做什么?

谢谢

Answer 1

好吧，我找到了一种解决它的方法，它真的很简单，只需将这个添加到jvectormap：

onRegionClick:function(e, code){
   $.colorbox({
         inline:true,
         href:"#inline_content",
         width:"50%"
   });
}