將外部文件中的Javascript代碼鏈接到HTML

Question

感謝Brian，我的代碼已經可以工作了，但是當我將其放在外部文件中時，它仍然無法工作。 誰能幫我理解原因？

js代碼（其他功能還可以，因為代碼太長，所以未將其放在此處）：

function handleFileSelect(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    var files = evt.target.files;

    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
        output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
        f.size, ' bytes, last modified: ',
        f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a','</li>');
    }

    $("#list").html('<ul>' + output.join('') + '</ul>');    
 }


$(document).ready(function() {

    //showAllImages();
    //showAllImagesFromCategory("beach");
    styleWordCloud();


    //associar pesquisa de categoria a cada palavra da nuvem de palavras
    $( "nav ul li a" ).each(function( index ) {


        $(this).click( function(event) {
            event.preventDefault();
            clearResults();

            showAllImagesFromCategory( $(this).text() );

        });

    });


    $("#search_form").submit(function(event){
        event.preventDefault();

        var q = $("#query").val()

        clearResults();
        showAllImagesFromQuery( q );

     });

    $( "div.color" ).each(function( index ) {

        $(this).click( function(event) {
            event.preventDefault();

            var selectedColor = $(this).css("background-color");
            //alert( selectedColor );
            clearResults();
            showAllImagesNearDominantColor( selectedColor );

        });

    });

    $( "#files" ).change(handleFileSelect(event));

});

html代碼：

<head>
<title>Pesquisa de Imagens</title>
<meta charset="utf-8">  
<!-- Inclusao de biblioteca JQuery -->
<script src="js/jquery-2.1.1.min.js" language="javascript"></script>
<script src="js/XML_LStorage.js"></script>
<script src="js/jsCode.js" language="javascript"></script>

<link rel="stylesheet" type="text/css" href="my_style.css">


</head>

<body>

<!--zona do cabeçalho da página. Inclui logotipo e barra de navegacao-->
<header>        
    <h1 id="site_title"><a href="index.html">Pesquisa de Imagens</a></h1>


    <!-- Main Menu -->
    <h2>Main menu</h2>
    <nav class="main-navigation">
        <ol>
            <li><a class="menu" href="index.html">Home</a></li>
            <li><a class="menu" href="search_bar.html">Barra Pesquisa</a></li>
            <li><a class="menu" href="color_search.html">Pesquisa por cor dominante</a></li>
            <li class="current"><a class="menu" href="image_search.html">Pesquisa por imagens</a></li>
            <li><a class="menu" href="contact_us.html">Contacte-nos</a></li>
        </ol>
</nav>



</header>

<!-- zona de conteúdo da página. Inclui logotipo e barra de navegacao -->
<article>
    <nav class="cloud">
        <ul>
            <li><a href="#">beach</a></li>
            <li><a href="#">birthday</a></li>
            <li><a href="#">face</a></li>
            <li><a href="#">indoor</a></li>
            <li><a href="#">manmade</a></li> <!-- alterar para todos de uma maneira bacana -->
            <li><a href="#">marriage</a></li>
            <li><a href="#">nature</a></li>
            <li><a href="#">no people</a></li>
            <li><a href="#">outdoor</a></li>
            <li><a href="#">party</a></li>
            <li><a href="#">people</a></li>
            <li><a href="#">snow</a></li>
        </ul>
     </nav>

    <!-- Primeira secção -->
    <section class="search_bar">

        <h2>Pesquisa por imagens</h2>
        <p>Pesquisa por pastas</p>
        <form id="img_search">
            <input type="file" id="files" name="files[]" multiple/>
            <output id="list"></output>
        </form>
        <p>Ou arrasta a imagem para o quadrado a tracejado</p>
        <center>
        <div id="drop_zone">Drop files here</div>
        <output id="list_dropzone"></output></center>

    </section>          

</article>


</body>
</html>

Answer 1

更改行

$( "#files" ).change(handleFileSelect(event));

至-

$("#files").on("change", handleFileSelect); // See http://api.jquery.com/on/

要么-

$("#files").change(handleFileSelect); // See http://api.jquery.com/change/

通過編寫“ handleFileSelect（event）”，您將立即執行該函數，而不是響應事件（括號將名為“ event”的未定義參數傳遞給該函數並立即執行）。 jQuery將自動將事件對象作為第一個參數傳遞給您定義的事件處理程序。

由於未定義evt，因此函數中的文件未定義-這會導致錯誤。

作為參考，如果您要將參數傳遞給事件，則可以執行以下操作-

$("#files").on("change",  function (event) { handleFileSelect(event, someParameter); });

將外部文件中的Javascript代碼鏈接到HTML

問題描述

1 個解決方案

解決方案1
2 已采納 2014-08-29 17:05:46

將外部文件中的Javascript代碼鏈接到HTML

問題描述

1 個解決方案

解決方案1 2 已采納 2014-08-29 17:05:46

解決方案1
2 已采納 2014-08-29 17:05:46