Jquery Ajax 简单应用程序:缺少 ） 参数列表之后

问题出在第一行，$(document中缺少)

//$(document.ready(function(){ You had this. ) is missing
$(document).ready(function(){

Missing ）in $（document

将 $（文档） 替换为 $（文档）

这是一个现场演示

$(document).ready(function() {
// mocked response from flights.php
var data = {
  json: $.toJSON({0: {trip: "Hawaii", price: "1000"} }),
  delay: 3
}
// AJAX post to "fllights.php" and process the response
$.ajax({
  url:"/echo/json/", // JSfiddle Echo API - http://doc.jsfiddle.net/use/echo.html
  data:data,
  type:"POST",
  success:function(data){
    var counter = 0;
    $.each(data, function(key, value){
      var li = "<li id='flight"+counter+"'"+" class='flightLi'>"+value['trip']+"<span class='hiddenPrice'>"+value['price']+"</span></li>";
      $('#flightList').append(li);
      addListener();    // add the onClick listener to the newly created <li> item. 
      counter++;            // You could also pass in the id attribute to this method 
      });
    }
});
// Slider
$("#priceSlider").slider({
  orientation: "vertical",
  min: 200,
  max: 1650,
  step: 200,
  value: 1650,
  slide: function(event, uiElement){
    $("#flightDetails").html("<p>Flight Details</p>").addClass("hidden");
    var numRegex = /('d+)('d{3})/;
    var inputNum = uiElement.value;
    var strNum = inputNum.toString();
    strNum = strNum.replace(numRegex, '$1' + ',' + '$2');
    $("#spanPrice").text(strNum);
    $("#inputPrice").val(uiElement.value);
    $(".hiddenPrice").each(function(){
      if($(this).text() > inputNum){
        $(this).parent().addClass("hidden");
      }
      else if($(this).text() < inputNum){
        $(this).parent().removeClass("hidden");
      }
    });
  }
});
// moked response from details.php for "flightID": myId
data = {
  json: $.toJSON({duration: '1000 hrs'}),
  delay: 1
}

// wraper method to only add the onClick listner after the new <li> is inserted to the DOM
function addListener(){
  // List item onClick AJAX
  $(".flightLi").one( "click", function() { // Using the .one method to only add the onClick event listener once
    $("#flightDetails").html("<p>Flight Details</p>").addClass("hidden");
    console.log("Flight id: "+$(this).attr("id"));
    $.ajax({
      url:"/echo/json/",
      dataType: "json",
      data: data,
      type: "POST",
      success: function(data) {
        var li = "<ul><li class='detailsLi'>Trip Duration: "+data['duration']+"</li></ul>";
        $("#flightDetails").removeClass("hidden").append(li);
      }
    });
  });
}
// Origional code 
// This doesn't work due to the fact that the <li> item 
// in the flightList list is inserted to the the DOM after the intital load
// you can also bind the event at the document level see this post http://bit.ly/1S0H2q0
// $(".flightLi").on('click', function(){
//   $("#flightDetails").html("<p>Flight Details</p>").addClass("hidden");
//   console.log("Flight id: "+$(this).attr("id"));
//   $.ajax({
//     url:"/echo/json/",
//     dataType: "json",
//     data: data,
//     type: "POST",
//     success: function(data) {
//       var li = "<ul><li class='detailsLi'>Trip Duration: "+data['duration']+"</li></ul>";
//       $("#flightDetails").removeClass("hidden").append(li);
//     }
//   });
// });
});

我在浏览您的代码时注意到的一些事情：

• $("#flightDetails").html("<p>Flight Details</p>").addClass("hidden");行实际上是删除了行程持续时间：内容，因为它完全替换了 #flightDetails 元素内部的html。 - 这可能是故意的
将
• onClick事件侦听器添加到新创建的<li>元素必须在文档级别完成，或者从实际将它们注入 DOM 的回调内部完成。我选择实现回调方法。请参阅这篇文章，了解如何在文档级别添加侦听器
• 从回调方法内部添加事件侦听器会打开可能多次将事件侦听器添加到同一元素的问题。这可能会导致每个触发器多次触发 onClick 事件。同样，您必须在文档级别添加事件，或者使用 one 方法仅添加事件一次。请参阅 JQuery.one 文档