错误函数与导入库jquery

Error function with imported library jquery

本文关键字：jquery 导入 函数 错误      更新时间：2023-09-26
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="Scripts/jQuery/book.js"></script>
<script type="text/javascript" src="Scripts/jQuery/jquery.min.js"></script>
<style type="text/css">
#book {
  width:160px;
  height:160px;
  margin-top:15px;
  border: 1px solid black;
}
</style>
<script type="text/javascript">
    var book = new book("book");
    function makeCode() {
        var elText = document.getElementById("text");
        if (!elText.value) {
            alert("Input a text");
            elText.focus();
            return;
        }
        qrcode.makeCode(elText.value);
    }
    makeCode();
    $("#text").
    on("blur", function () {
        makeCode();
    }).
    on("keydown", function (e) {
        if (e.keyCode == 13) {
            makeCode();
        }
    });
</script>
</head>
<body>
<input id="text" type="text" value="create a book" style="width:80%" /><br />
<div id="qrcode"></div>
</body>
</html>

我创建了一个基本代码，但makeCode()似乎没有被调用。我在"Scripts/jQuery/book.js"下添加了导入的book.js和jQuery .min.js。通过在输入中键入一个值，将调用makeCode。

你需要确保DOM已经准备好了，否则元素可能还没有被加载到里面。

$(function(){
    makeCode();
    $("#text").
    on("blur", function () {
        makeCode();
    }).
    on("keydown", function (e) {
        if (e.keyCode == 13) {
            makeCode();
        }
    });
});

我不知道book函数在内部做什么，但如果这有任何DOM引用，那么这也需要在DOM准备好后调用。

http://jsfiddle.net/6oxu38gt/

Javascript属于在</body>之前的页面底部，你的jQuery命令应该在一个dom准备包装(虽然不是严格要求在页面底部)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#book {
  width:160px;
  height:160px;
  margin-top:15px;
  border: 1px solid black;
}
</style>
</head>
<body>
<input id="text" type="text" value="create a book" style="width:80%" /><br />
<div id="qrcode"></div>
<!-- javascript at the end, and load jquery first -->
<script type="text/javascript" src="Scripts/jQuery/jquery.min.js"></script>
<script type="text/javascript" src="Scripts/jQuery/book.js"></script>
<script type="text/javascript">
    var book = new book("book");
    function makeCode() {
        var elText = document.getElementById("text");
        if (!elText.value) {
            alert("Input a text");
            elText.focus();
            return;
        }
        qrcode.makeCode(elText.value);
    }
    makeCode();
    $(function(){
        $("#text").
        on("blur", function () {
            makeCode();
        }).
        on("keydown", function (e) {
            if (e.keyCode == 13) {
                makeCode();
            }
        });
    });
</script>
</body>
</html>

jQuery DOM必须准备好。可以把document ready函数看作是一个自动执行的函数，它在页面元素加载完成后触发。

将javascript放在文档中。准备好代码，如下所示…

$(document).ready(function() {
    //do jQuery stuff when DOM is ready
});

那么，对于你的例子:

<script type="text/javascript">
    $(document).ready(function() {
           var book = new book("book");
    function makeCode() {
        var elText = document.getElementById("text");
        if (!elText.value) {
            alert("Input a text");
            elText.focus();
            return;
        }
        qrcode.makeCode(elText.value);
    }
    makeCode();
    $("#text").
    on("blur", function () {
        makeCode();
    }).
    on("keydown", function (e) {
        if (e.keyCode == 13) {
            makeCode();
        }
    });
    });
</script>

感谢大家的帮助!问题是:

1)确保DOM准备就绪

$(document).ready(function() {
    //do jQuery stuff when DOM is ready
});

2)改变

的顺序
<script type="text/javascript" src="Scripts/jQuery/book.js"></script>
<script type="text/javascript" src="Scripts/jQuery/jquery.min.js"></script>

最后的结果是

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#book {
  width:160px;
  height:160px;
  margin-top:15px;
}  
</style>
<script type="text/javascript" src="~/Scripts/jQuery/jquery.min.js"></script>
<script type="text/javascript" src="~/Scripts/jQuery/book.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var book = new Book("book");
        function makeCode() {
            var elText = document.getElementById("text");
            if (!elText.value) {
                alert("Input a text");
                elText.focus();
                return;
            }
            qrcode.makeCode(elText.value);
        }
        makeCode();
        $("#text").
    on("blur", function () {
        makeCode();
    }).
    on("keydown", function (e) {
        if (e.keyCode == 13) {
            makeCode();
        }
    });
    });
</script>
</head>

<body>
<input id="text" type="text" value="create a book" style="width:80%" /><br />
<div id="qrcode"></div>
</body>
</html>
相关文章：