2015-12-09 98 views
0

js內聯工作,但它不會觸發(顯示爲JS完全被忽略)曾經移動到外部文件..很奇怪,有什麼想法?JS沒有通過外部鏈接讀取,但讀取內聯

<html> 

<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script> 
    <script src="js/global.js"></script> 
    <script src="js/bootstrap.js" type="text/javascript"></script> 
    <link rel="stylesheet" href="css/bootstrap.css"> 
    <link rel="stylesheet" href="css/bootstrap-theme.css"> 
    <link rel="stylesheet" href="css/global.css"> 
</head> 

<body> 
<center> 
    <div class="container" id="records" style="background-color:#fff; width: 400px; margin: 0 auto;"> 
     <br/> 

     <div class="row" id="item1" class="box"> 
      Item 1 Details for the PDF test.<br> 

      <input type="checkbox" id="check1" name="sample[]" value="red"/> <em>This</em> is a checkbox1 
        <br /> 

     </div> 

     <div class="space"></div> 

     <div class="row" id="item2" class="box"> 
      Item 2 Details for the PDF test.<br> 

      <input type="checkbox" id="check2" name="sample[]" value="red"/> <em>This</em> is a checkbox2 
        <br /> 

     </div> 

     <div class="space"></div> 

     <div class="row" id="item3" class="box"> 
      Item 3 Details for the PDF test.<br> 

      <input type="checkbox" id="check3" name="sample[]" value="red"/> <em>This</em> is a checkbox3 
        <br /> 

     </div> 

     <div class="space"></div> 

     <div class="row" id="item4" class="box"> 
      Item 4 Details for the PDF test.<br> 

      <input type="checkbox" id="check4" name="sample[]" value="red"/> <em>This</em> is a checkbox4 
        <br /> 
     </div> 

     <div class="space"></div> 

     <center> 
     <div class="container1"> 
      <div class="row"> 
       <div class="col-md-8"> 
        <p><a class="btn btn-primary btn-lg download-pdf" href="#" role=button>Download PDF</a></p> 
       </div> 
      </div> 
     </div> 
     </center> 

    <div id="print" style="background-color:#fff"></div> 

    </center> 

</body> 

</html> 

外部JS:

texts = { 
    item1: 'Item Box 1 Content <strong>html</strong> right here! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 
    item2: 'Now its Item Box 2 <strong>html</strong> content here ! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 
    item3: 'This is the example <strong>html</strong> of Item box 4! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 
    item4: 'Item box number 5 <strong>html</strong> content is here! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 
    } 
    $("#container").css('background', '#fff') 

    $('.download-pdf').click(function() { 

    notChecked = $("input[type=checkbox]:not(:checked)").parent(); 
    notChecked.hide(); 
    yesChecked = $("input[type=checkbox]:checked").parent(); 

    $.each(yesChecked, function(index, el) { 
     $(el).show().html(texts[$(el).attr('id')]); 
    }); 

    var pdf = new jsPDF('p', 'pt', 'a4'); 

    pdf.addHTML(document.getElementById('records'), function() { 
     // add here 

     setTimeout(function(){ 
     location.reload(); 
     },3000); 

    }); 

    var file = 'test'; 
    if (typeof doc !== 'undefined') { 
     doc.save(file + '.pdf'); 
    } else if (typeof pdf !== 'undefined') { 
     setTimeout(function() { 
      pdf.save(file + '.pdf'); 
      // $("#item4").hide(); 

     }, 2000); 
    } else { 
     alert('Error 0xE001BADF'); 
    } 

}); 
+1

究竟做「它不工作」是什麼意思?是否有錯誤報告? *什麼都會發生? – Pointy

+0

(顯示爲JS完全忽略) –

回答

1

這是因爲HTML在之後呈現您的JavaScript有機會使用它,因此您的選擇器將會空白。

$("#container")這樣的選擇器將不會產生任何結果,因爲#container DOM節點尚未呈現。

包裝你的代碼在ready回調,因此DOM時可用你的JavaScript執行:

$(document).ready(function() { 
    // Your JavaScript goes here 
    // DOM is ready for querying 
}); 
+0

謝謝,兄弟,忽略了這個! –

1

你必須把下面的HTML代碼腳本導入語句。否則它會在HTML元素創建之前執行。