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

此代碼的工作，提高:-)

性能