jquery Ajax简单应用程序：失踪）参数列表后

Question

我拉我的头发在这里。在我的最后一行代码中，我一直在“参数列表后面”丢失）。我认为这与我的连接有关，但我无法弄清楚。这是与jQuery UI的jQuery：一个简单的滑块。用户增加滑块上的数量并显示该数量的可用航班。点击可用的飞行展示​​期间：

$(document.ready(function(){ 
    $.ajax({ 
    url: 'http://localhost:8888/all_work_july_6/javascript_start_here/flights.php', 
    dataType: "json", 
    success: function(data){ 
     var counter = 0; 
     $.each(data, function(key, value){ 
      $("#flightList").append('<li ' + 'id="flight' + counter + '"' + ' class="flightLi">' + value['trip'] + '<span class="hiddenPrice">' + value['price'] + '</span></li>'); 

     counter++; 
     }); 
    } 


}); 

$("#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"); 
     } 
    }); 
} 

}); 

$(".flightLi").on('click', function(){ 
$("#flightDetails").html("<p>Flight Details</p>").addClass("hidden"); 
var myId = $(this).attr("id"); 
$.ajax({ 
    url: 'http://localhost:8888/all_work_july_6/javascript_start_here/details.php', 
    dataType: "json", 
    data: { "flightID": myId }, 
    type: "POST", 
    success: function(data) { 
     $("#flightDetails").removeClass("hidden").append('<ul>' + '<li class="detailsLi">Trip Duration: ' + data['duration'] + '</li>' + '</ul>'); 

     } 

    }); 
}); 
}); 

Answer 1

的问题是在第一线，缺少)在$(document

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

$(document).ready(function(){ 

Answer 2

丢失）中的$（document

替换$（文件$（document）

Answer 3

这是live demo

$(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。我选择实施回调方法。请参阅this post用于在文档级别添加侦听器
• 从回调方法内部添加事件侦听器会引发将事件侦听器多次添加到同一元素的问题。这可能会导致每触发一次onClick事件触发多次。再次，您必须在文档级添加事件，或者使用one方法仅添加一次事件。见JQuery.one documentation