變化（）爲select元素不工作

我喜歡這本書，因爲它與解釋樣品代碼看起來非常實用的教我們。

的示例代碼是通過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（）{不起作用。

我只是輸入報警（「2」）;測試代碼，但我從來沒有見過警報。

我也試圖改變像

$（「＃格式」）代碼。改（函數（）{，

$（「＃配置文件」）。變化（函數（）{

他們都沒有工作也沒有。

你能告訴我是什麼原因？

來源

2014-09-04 MinLoveSu

好主意驗證與警惕你的理論，但是你應該學會使用開發工具，調試器，它比使用警報調試容易得多。在這種情況下，你可能已經停止了一個斷點，並發現當時$（「＃formats，#profiles」）爲空。 – Iftah 2014-09-04 20:46:21

@Iftah非常感謝。我有個問題。你說我需要使用調試器，我只使用編輯器的'sublime text2'。在這個使用Nodejs和jquery和ajax的示例代碼中，我可以使用哪種調試器？ – MinLoveSu 2014-09-04 23:28:55

當您在瀏覽器打開頁面（推薦）或Firefox，你可以打開開發人員工具（在Chrome F12），用它可以查看客戶端代碼（不是Node.js的，但畢竟是提供給瀏覽器的JavaScript）和您可以設置斷點，檢查值，等等。我推薦的教訓1-4中的出色免費課程https://www.codeschool.com/courses/discover-devtools – Iftah 2014-09-05 21:36:48

要麼換你的客戶端代碼在DOM準備語句或將其移動到0123年底。您的腳本在頁面呈現之前正在執行。

來源

2014-09-04 20:34:15 tymeJV

後，我移動的腳本代碼結束，這是工作。非常感謝你。 – MinLoveSu 2014-09-04 20:41:13

變化（）爲select元素不工作

回答

相關問題