javascript - 无法在动态选项卡中初始化 fullcalendar js

Question

fullcalendar js在正常的DOM加载中可以正常工作，但是当它动态推送时，它就不起作用了。

如何解决这个问题？

CodePen 链接:http://codepen.io/rajrs/pen/YWwLGw

HTML

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div id='calendar'></div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="container">
        <h1>Dynamic Tabs</h1>

        <div class="well">
          <a href="#" id="btnAdd"><i class="icon-plus-sign-alt"></i> Add Tab</a>
          <br>
          <br>
          <ul class="nav nav-tabs" id="tabs">
          </ul>
          <div class="tab-content">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

JS

$('#btnAdd').click(function(e) {
  var nextTab = $('#tabs li').size() + 1;
  // create the tab
  var fromhtml = '<div class="row"> <div class="form-group ">  <div class="f-cal"></div><div class="col-md-6"> <label>Required No Of views</label> </div><div class="col-md-6"> <input type="text" class="form-control" id="bitval" name="views" value=""> </div></div><div class="col-md-12" style="margin-top:15px;"> <p class="col-md-6" style="line-height: 5;">Required No.Of Views : </p><div class="col-sm-6"> <div class="demo-big__example"> <span id="range_02" class="range_02 irs-hidden-input" readonly=""></span> </div></div></div><div class="col-md-12" style="border-bottom:1px solid #ccc;margin-bottom:18px;"> <div class="col-md-3 right"> <button type="button" id="ads" class="btn btn-primary">Target Audience</button> </div></div><div id="advanced"> <div class="col-md-12"> <div class="col-md-3"> <p id="age" style="float:right;line-height: 5">Age : </p></div><div class="col-md-9"> <div class="demo-big24"> <span id="range_24" class="range_24 irs-hidden-input" readonly=""></span> </div></div><div class="col-md-12"> <div class="col-md-3"> <p id="sex" style="float:right;line-height: 2.5;">Sex :</p></div><div class="col-md-9"> <label id="male"> <input type="radio" name="optionRadios" id="optionsRadios1" value="Male">Male</label> <label id="female"> <input type="radio" name="optionRadios" id="optionsRadios2" value=" Female">Female</label> </div></div></div><div class="col-md-12"> <div class="col-md-3"> <p id="geo" style="float:right;line-height: 2.5;">Geography :</p></div><div class="col-md-9"> <div class="form-group" id="geography"> <input id="autocomplete" class="autocomplete" placeholder="Enter your address" type="text" name="geography"></input> </div></div></div></div>';

  $('<li><a href="#tab' + nextTab + '" data-toggle="tab">Tab ' + nextTab + '</a></li>').appendTo('#tabs');
  // create the tab content
  $('<div class="tab-pane" id="tab' + nextTab + '">' + fromhtml + '</div>').appendTo('.tab-content');
  // make the new tab active
  $('#tabs a:last').tab('show');
});
$('.container').on('DOMSubtreeModified', function() {
  alert("dom tree modified")
});

Answer 1

此代码有效并提高了性能:-)

$('#btnAdd').click(function(e) {
   var nextTab = $('#tabs li').size() + 1;
   // create the tab
   var fromhtml = '...';

   $('<li><a href="#tab' + nextTab + '" data-toggle="tab">Tab ' + nextTab + '</a></li>').appendTo('#tabs');
   // create the tab content
   $('<div class="tab-pane" id="tab' + nextTab + '">' + fromhtml + '</div>').appendTo('.tab-content');
   // make the new tab active
   $('#tabs a:last').tab('show');

   // I only have modified and moved this part to here
   $('.f-cal').fullCalendar({
       header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                }

    });
 });