select元素的change（）不起作用
我正在学习节点食谱第二版的Nodejs。
我喜欢这本书，因为它正在教我们解释看起来非常实用的示例代码。
示例代码是通过AJAX部分进行浏览器 – 服务器传输的一部分
无论如何，主要的问题是下面是EX代码，下面是index.html文件
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script> $.get("http://localhost:8080/profiles",function (profile_names) { $.each(profile_names, function (i, pname) { $("#profiles").append("<option>" + pname + "</option>"); }); }, "json"); $("#formats, #profiles").change(function () { alert("2"); var format = $("#formats").val(); $.get("http://localhost:8080/profile/" + $("#profiles").val() + "." + format, function (profile, stat, jqXHR) { var cT = jqXHR.getResponseHeader("Content-Type"); $("#raw").val(profile); $("#output").html(''); if (cT === "application/json") { $.each($.parseJSON(profile), function (k, v) { $("#output").append("<b>" + k + "</b> : " + v + "<br>"); }); return; } if (cT === "application/xml") { profile = jqXHR.responseXML.firstChild.childNodes; $.each(profile, function (k, v) { if (v && v.nodeType === 1) { $("#output").append("<b>" + v.tagName + "</b> : " + v.textContent + "<br>"); } }); } }, "text"); }); </script> <style> #frm, #raw {display:block; float:left; width:210px}, #raw {height:150px; width:310px; margin-left:0.5em} </style> <title> INDEX </title> </head> <body> <form id="frm"> Profile: <select id="profiles"> <option> </option> </select> <br></br> Format:<select id="formats"> <option value="json"> JSON </option> <option value="xml"> XML </option> </select> <br></br> <div id="output"></div> </form> <textarea id="raw"></textarea> </body> </html> 其次，server.js文件
var http = require('http'); var fs = require('fs'); var path = require('path'); var profiles = require('./profiles'); var xml2js = require('xml2js'); var index = fs.readFileSync('index.html'); var routes, mimes = {xml: "application/xml", json: "application/json"} function output(content, format, rootNode) { if (!format || format === 'json') { return JSON.stringify(content); } if (format === 'xml') { return (new xml2js.Builder({rootName: rootNode})).buildObject(content); } } routes = { 'profiles': function (format) { return output(Object.keys(profiles), format); }, '/profile': function (format, basename) { return output(profiles[basename], format, basename); } }; http.createServer(function (request, response) { var dirname = path.dirname(request.url), extname = path.extname(request.url), // $.get('http://localhost:8080/profile/' + $('#profiles').val() + '.' + format basename = path.basename(request.url, extname); extname = extname.replace('.', ''); //remove period response.setHeader("Content-Type", mimes[extname] ||'text/html'); if (routes.hasOwnProperty(dirname)) { response.end(routes[dirname](extname, basename)); return; } if (routes.hasOwnProperty(basename)) { response.end(routes[basename](extname)); return; } response.end(index); }).listen(8080);
下面是profiles.js文件
module.exports = { ryan: { name: "Ryan Dahl", irc: "ryah", twitter: "ryah", github: "ry", location: "San Francisco, USA", description: "Creator of node.js" }, isaac: { name: "Isaac Schlueter", irc: "isaacs", twitter: "izs", github: "isaacs", location: "San Francisco, USA", description: "Former project gatekeeper, CTO npm, Inc." } };
我认为在索引文件$（“＃formats，#profiles”）。change（function（）{ is not working。
我只是inputalert（“2”）; testing代码，但我从来没有见过警报。
我也试图改变代码
$（“＃formats”）。change（function（）{，
$（“＃profiles”）。change（function（）{
他们两人都没有工作。
你能让我知道是什么原因吗？
将您的客户代码包装在DOM就绪语句中，或将其移动到<body>的结尾处。 您的脚本在页面呈现之前正在执行。