JS & jQuery can't detect html elements, and sa

2019-01-01 02:20发布

站内问答 / JavaScript
1155 3 4

I'm pretty new to JS and jQuery, and i'm trying to make a subtitles player using them. Unfortunately, i'm stuck in a very early stage.

When I'm trying to select some HTML elements through a .js file, it acts like it can't locate the element I'm asking for, and nothing happens. If I try to alert the value or the HTML of the elements, it alerts undefined.

So this is the code:

HTML

  <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="jquery-2.1.3.min.js"></script>
        <script src="script.js"></script>
        <style type="text/css">
            body{
                margin: 0px;
                padding: 0px;           
            }           
            #wrapper{
                width: 150px;
                text-align: center;
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#75bdd1), color-stop(14%,#75bdd1), color-stop(100%,#2294b3));
                padding: 10px 2px;
            }
            h3{
                font-family: Arial, Helvetica, sans-serif;
            }
            img{
                width: 50px;
                margin: 0 auto;     
            }
            input{
            display: none;          
            }
        </style>


    </head>
    <body>
        <div id="wrapper">
            <h3>Select subtitles file</h3>
                <img src="browse.png" alt="browse">
        </div>
        <input type="file" accept=".srt" id="file">
    </body>
</html>

script.js

$("div").click(function () {
    console.log('loaded');
});

Thanks.

3条回答
不流泪的眼
2楼-- · 2019-01-01 03:15

You should execute your script after DOM Ready event. In jquery it makes so: 

$(function(){
    $("div").click(function () {
            console.log('loaded');
    })
});
查看更多
0人赞 添加讨论(0) 举报
不再属于我。
3楼-- · 2019-01-01 03:23

Because your script tag is above the HTML defining the elements that it acts on, it can't find them because they don't exist as of when that code runs. Here's the order in which things are happening in your page:

  1. The html and head elements are created
  2. The meta element is created and its content noted by the parser
  3. The script element for jQuery is created
  4. The parser stops and waits for the jQuery file to load
  5. Once loaded, the jQuery file is executed
  6. Parsing continues
  7. The script element for your code is created
  8. The parser stops and waits for your file to load
  9. Once loaded, your script code is run — and doesn't find any elements, because there are no div elements yet
  10. Parsing continues
  11. The browser finishes parsing and building the page, which includes creating the elements you're trying to access in your script

Ways to correct it:

  1. Move the script elements to the very end, just before the closing </body> tag, so all of the elements exist before your code runs. Barring a good reason not to do this, this is usually the best solution.

  2. Use jQuery's ready feature.

  3. Use the defer attribute on the script element, but beware that not all browsers support it yet.

But again, if you control where the script elements go, #1 is usually your best bet.

查看更多
0人赞 添加讨论(0) 举报
春风洒进眼中
4楼-- · 2019-01-01 03:24

When you call the .click() method the dom is not fully loaded. You have to wait till everything in DOM is loaded.So you have to change your script.js to this:

$(document).ready(function(){
$("div").click(function () {
    console.log('loaded');
});
});
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)