模式（「秀」）不按預期工作

Question

我犯了一個功能appendScript將上一個按鈕單擊事件被稱爲我的功能代碼是

function appendScript() { 
    var v_js; 
    var head = document.getElementsByTagName('head')[0]; 
    v_js = document.createElement('script'); 
    v_js.type = 'text/javascript'; 
    v_js.src = "/resource/1372205606000/jquery_min_js"; 
    head.appendChild(v_js); 
    interval = self.setInterval(function() {  
     if (jQuery) { 
      window.clearInterval(interval); 

      var body = document.getElementsByTagName('body')[0]; 
      v_js = document.createElement('script'); 
      v_js.type = "text/javascript"; 

      v_js.src = "/resource/1372176744000/bootstrap_min_js"; 
     }   
     body.appendChild(v_js); 
     var v_css = document.createElement('link');  
     v_css.rel = "stylesheets"; 
     v_css.type = "text/css"; 
     v_css.href = "/resource/1372206945000/bootstrap_min_css"; 
     body.appendChild(v_css);   
    }, 300); 

    var interval1  = self.setInterval(  function() {   

     if (typeof (jQuery.fn.modal) !== 'undefined')    { 
      console.log('Hello!!');  
      window.clearInterval(interval1); 
      jQuery(document.getElementsByTagName('body')[0]).append('<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="myModalLabel">Modal header</h3></div><div class="modal-body"><p>One fine body…</p></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Close</button><button class="btn btn-primary">Save changes</button></div></div>'); 

      jQuery('#myModal').modal('show'); 
     } 
    }, 300); 
} 

這個代碼不顯示模式時，我的點擊按鈕。任何人都可以請幫助爲什麼它不顯示模態對話，當我用顯示參數調用模態函數？其顯示你好！在控制檯中並正確添加這些元素，但唯一不符合預期的行是在下面。

jQuery('#myModal').modal('show'); 

Answer 1

我不知道原來的問題是什麼事，但我注意到的是設置動態<link>的rel財產使用「樣式」，當它應該是「樣式」。雙方認爲，利用裝載的東西onload方法，我得到它的工作：

function appendScript() { 
    var head = document.head || document.getElementsByTagName('head')[0], 
     $script; 
    if (typeof jQuery === "undefined") { 
     $script = document.createElement('script'); 
     $script.type = 'text/javascript'; 
     $script.onload = jQueryLoaded; 
     $script.src = "//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"; 
     head.appendChild($script); 
    } else { 
     jQueryLoaded(); 
    } 
} 

function jQueryLoaded() { 
    var head = document.head || document.getElementsByTagName('head')[0], 
     linkTB = document.createElement('link'), 
     scriptTB = document.createElement('script'); 

    if (typeof jQuery.fn.modal === "undefined") { 
     linkTB.rel = "stylesheet"; 
     linkTB.type = "text/css"; 
     linkTB.href = "//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css"; 
     head.appendChild(linkTB); 

     scriptTB.type = "text/javascript"; 
     scriptTB.onload = twitterBSLoaded; 
     scriptTB.src = "//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"; 
     head.appendChild(scriptTB); 
    } else { 
     twitterBSLoaded(); 
    } 
} 

function twitterBSLoaded() { 
    jQuery(document.body).append('<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="myModalLabel">Modal header</h3></div><div class="modal-body"><p>One fine body…</p></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Close</button><button class="btn btn-primary">Save changes</button></div></div>'); 
    jQuery('#myModal').modal('show'); 
} 

DEMO：http://jsfiddle.net/hz3Bw/1/

當然，這裏採用CDN文件，因此該網址已被更改，因此它的工作原理在jsFiddle。