如何将javascript生成的内容插入非活动twitter引导选项卡

他

目前，我正在创建一个rails 4应用程序，样式是通过bootstrap 3完成的。现在我想在我的一个模型显示页面数据集上添加选项卡，见下文。这就像来自数据库的内容的魅力一样，即使内容插入到引导的非活动选项卡中。但是，对于javascript模块生成和插入的内容，存在一个问题，即它仅在页面加载时选项卡处于活动状态时才起作用。对于jcloud、gmaps4rails等多个javascript生成的内容，情况也是如此。例如，我使用gmaps4rails，其中构建器将带有多边形的谷歌地图插入数据集显示页面。如果该选项卡在加载时处于活动状态，则此操作效果良好。如果它处于非活动状态，则地图如下图所示。我做错了什么

视图数据集显示haml：

Javascript：

“地图不活动”选项卡：

编辑：

我在选项卡元素中添加了一个点击操作，并包装了javascript代码 要调用，请单击进入函数

用onclick单击选项卡

Javascript函数wrap：

---

这是js选项卡的一个已知问题，请执行以下操作：

$(map_li_selector).one('click', function(){ createMap(); })

---

地图创建应该在tab被设置为activeWell时完成。我曾经考虑过类似的事情，但是我不太擅长javascript，因此无法尝试。你能给我一个提示或者一个我可以从中学习的小示例函数吗？类似于$'maptab'。在'click'上，函数{createMap；}在click上运行很好。这救了我一天。谢谢然而，我现在有一个相关的问题。如果我第一次点击标签，它会显示很好。如果我切换到另一个选项卡并返回，则与之前一样，地图混乱。我将把修改后的代码添加到原始文章中。我将.mapselector添加到链接中，使其最终与javascript一起工作。如下所示：%li.mapselect和选择器$'.mapselect'。。。谢谢

:javascript
  jQuery(function($) {

    var handler = Gmaps.build('Google');
      handler.buildMap({ internal: {id: 'printmap'}}, function(){
      var polygons = handler.addPolygons(#{@bounding_box.to_json},
        {
          "strokeColor": "#FF0000"
        }
      );
      handler.bounds.extendWith(polygons);
      handler.fitMapToBounds();
      handler.getMap().setZoom(8);
    });

    $(window).resize(function () {
        var h = $(window).height(),
            offsetTop = 60; // Calculate the top offset

        $('#printmap').css('height', (h - offsetTop));
    }).resize();

    $(window).resize(function () {
        var h = $(window).height(),
            offsetTop = 60; // Calculate the top offset

        $('#printwordcloud').css('height', (h - offsetTop));
    }).resize();


    var word_array = #{@wordcloud}

    $(function() {
      $("#printwordcloud").jQCloud(word_array);
    });
  });

.row-fluid
  .span8
    %ul.nav.nav-tabs
      %li.active
        %a{"data-target" => "#datatab", "data-toggle" => "tab", href: "#datatab"} Data
      %li
        %a{"data-target" => "#maptab", "data-toggle" => "tab", href: "#maptab", onclick: "buildMap()"} Map
      %li
        %a{"data-target" => "#wordcloudtab", "data-toggle" => "tab", href: "#wordcloudtab", onclick: "buildWordCloud()"} Wordcloud
    .tab-content

function buildMap() {
    var handler = Gmaps.build('Google');
      handler.buildMap({ internal: {id: 'printmap'}}, function(){
      var polygons = handler.addPolygons(#{@bounding_box.to_json},
        {
          "strokeColor": "#FF0000"
        }
      );
      handler.bounds.extendWith(polygons);
      handler.fitMapToBounds();
      handler.getMap().setZoom(8);
    });
  }

$(map_li_selector).one('click', function(){ createMap(); })