Question

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');
    }

});

Answer 1

您必须将脚本import语句放在HTML代码下面。否则，它将在创建HTML元素之前执行。

Answer 2

这是因为HTML 在之后呈现有机会使用它，因此您的选择器会显示为空白。

$("#container")之类的选择器不会产生任何结果，因为尚未呈现#container DOM节点。

将代码包装在ready回调中，以便在JavaScript执行时DOM可用：

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

JS不是通过外部链接读取而是内联读取

2 个答案: