Colorbox не работает с jvectormap

Question

Я пытаюсь открыть colorbox, щелкнув по стране, но он не работает.

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> 
... 

ЯШ:

... 

$('#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%" 
    }); 
}