Javascript 如何使用jquery+；节点js

我用jade创建了一个包含两个选择框和一个文本框的表

当我单击我的按钮添加更多行时，在用户更改了第二个选择框后，通过使用ajax更改第一个选择框中的选择，我的行添加代码停止工作

有人能在下面的代码中看到我可能出错的地方吗

我的玉码：

form(method ='Post', action='/orderlist/#{login_id}', data-bv-message='') 
              .form-group
               input.form-control(type='text', name='order_date', value='', id='orderdate' ,placeholder='Enter the date' style='width:65%;') 
              .table-responsive
               table#item_table.items.table.table-striped.table-bordered
                thead
                 tr
                  th(style='min-width: 200px;') Menu
                  th(style='min-width: 200px;') Item
                  th(style='min-width: 200px;') Item Quantity  
                  //th(style='min-width: 200px;') Action 
                tbody
                 tr
                  td(style='vertical-align: top; width:150px')
                    select.form-control(name='menu' , class = 'menu_list' , id="menu_item" )
                     option(value='' ) ---Select---
                     each val in orders
                      option(name = 'food' ,value=' #{val.availability_type }' , selected = selected) #{val.availability_type } 
                  td(class='item_select' style='vertical-align: top; width:150px')
                    select.form-control(name=""  )
                     option(value='' ) ---Select---
                  td(style='vertical-align: top; width:150px')
                    input.form-control(type='text',placeholder='Enter the quantity' value='', name='order_qty')
                  //td(style='vertical-align: top; width:150px')
                    //button.btn.btn-success.color(type='button',value='addrow',name='add',class='addRow') Add 
                    //&nbsp 
                    //button.btn.btn-success.color(type='button',value='removerow',name='remove' id='deleteRow') Delete 
              .pull-left
                .form-group
                 button#forgot-btn.btn.btn-success.color(type='submit',value='ordered',name='submit') Submit 
                 &nbsp 
                 button#forgot-btn.btn.btn-success.color(type='cancel',value='cancelled',name='cancel') Cancel
              .pull-right
                .form-group 
                 button.btn.btn-success.color(type='button',value='addrow',name='add' , id="addRow") Add 
                 &nbsp 
                 button.btn.btn-success.color(type='button',value='removerow',name='remove' id='deleteRow') Delete 

我的ajax代码： 剧本

$.noConflict（）；
$（文档）.ready（函数（）{
$（'.menu_list'）。更改（函数（）{
变量菜单=$（'.menu_list'）.val（）；
log（$（this.val（））；
var t=$（本）；
t、 父项（'tr'）.find（'item_select'）.html（“kkkk”）；
$.ajax({
url:“/子菜单”，
类型：“POST”，
数据类型：“json”，
数据：{“menu”：menu}，
成功：功能（项目）{
var selectList=“”；
$。每个（项目、功能（键、值）{
//var product_id=value.product_id；
选择列表+=“”+值。产品名称+“”；
}); 
选择列表+=“”；
t、 父项（'tr'）.find（'.item_select'）.html（selectList）；
}
});
});
$（'#addRow'）。单击（函数（）{
警报（“表格”）；
$（“#item_table tbody”）.append（$（“#item_table tbody tr:last”）.clone（）；
}); 

您能告诉我们什么在ajax调用中不起作用吗？选择列表没有填充，或者您甚至没有在服务器上执行某些操作

下面是对代码的几点评论：

$('.menu_list').change(function() {
var menus = $(this).val(); //If you have menu_list on each row use the current one
console.log($(this).val());
var t = $(this);
t.parents('tr').find('.item_select').html("kkkkk");

  $.ajax({
    url: '/submenu',
    type: "POST",
    dataType: 'json',
    data: {"menu": menus},
    success: function(item) {

    var selectList = "<select name='item'  class='form-control'>";
    //it's json so don't need scan the array like this. You can access the property directly.
      $.each(item, function(){
                   selectList += "<option value='"+this.product_id+"'>"+this.product_name+"</option>";
      }); 
      selectList +="</select>";
      t.parents('tr').find('.item_select').html(selectList);
    }
  });
});

$（'.menu_list'）。更改（函数（）{
var menus=$（this）.val（）；//如果每行上都有菜单列表，请使用当前列表
log（$（this.val（））；
var t=$（本）；
t、 父项（'tr'）.find（'item_select'）.html（“kkkk”）；
$.ajax({
url:“/子菜单”，
类型：“POST”，
数据类型：“json”，
数据：{“菜单”：菜单}，
成功：功能（项目）{
var selectList=“”；
//它是json，所以不需要像这样扫描数组。您可以直接访问属性。
$.each（项，函数（）{
选择列表+=“”+此产品名称+“”；
}); 
选择列表+=“”；
t、 父项（'tr'）.find（'.item_select'）.html（selectList）；
}
});
});

此外，在动态创建html时，必须绑定事件：

$('#addRow').click(function(){

    $('#item_table tbody').append($("#item_table tbody tr:last").clone());
    $("#item_table tbody tr:last").find('.menu_list').change(function() {
var menus = $(this).val(); //If you have menu_list on each row use the current one
console.log($(this).val());
var t = $(this);
t.parents('tr').find('.item_select').html("kkkkk");

  $.ajax({
    url: '/submenu',
    type: "POST",
    dataType: 'json',
    data: {"menu": menus},
    success: function(item) {

    var selectList = "<select name='item'  class='form-control'>";
    //it's json so don't need scan the array like this. You can access the property directly.
      $.each(item, function(){
                   selectList += "<option value='"+this.product_id+"'>"+this.product_name+"</option>";
      }); 
      selectList +="</select>";
      t.parents('tr').find('.item_select').html(selectList);
    }
  });
});

}); 

$（'#addRow'）。单击（函数（）{
$（“#item_table tbody”）.append（$（“#item_table tbody tr:last”）.clone（）；
$（“#item_table tbody tr:last”）.find（'.menu_list'）.change（function（）{
var menus=$（this）.val（）；//如果每行上都有菜单列表，请使用当前列表
log（$（this.val（））；
var t=$（本）；
t、 父项（'tr'）.find（'item_select'）.html（“kkkk”）；
$.ajax({
url:“/子菜单”，
类型：“POST”，
数据类型：“json”，
数据：{“菜单”：菜单}，
成功：功能（项目）{
var selectList=“”；
//它是json，所以不需要像这样扫描数组。您可以直接访问属性。
$.each（项，函数（）{
选择列表+=“”+此产品名称+“”；
}); 
选择列表+=“”；
t、 父项（'tr'）.find（'.item_select'）.html（selectList）；
}
});
});
}); 

我已经找到了我昨天发布的问题的解决方案

script.
 $.noConflict();
 $(document).ready(function() {
  Items();
  $('#addRow').click(function(){
  alert("table");
  $('.item_menu tbody').append($(".item_menu tbody tr:last").clone());
  alert("enter23")
  Items();
  }); 
  $("#orderdate").click(function(){
  alert("welcome");
  var date = new Date();
  var currentMonth = date.getMonth();
  var currentDate = date.getDate();
  var currentYear = date.getFullYear();
  var minDate=new Date(currentYear, currentMonth, currentDate);
  $("#orderdate").datepicker({dateFormat:'yy-mm-dd',  beforeShowDay: 
  });
});   
function Items(){
 $('.menu_list').on('change',function() {
 var menus = $(this).val();
 console.log($(this).val());
 var t = $(this);
 t.parents('tr').find('.item_select').html("kkkkk");
    $.ajax({
    url: '/submenu',
    type: "POST",
    dataType: 'json',
    data: {"menu": menus},
    success: function(item) {
      var selectList = "<select name='item'  class='form-control'>";
      $.each(item, function(key, value){
       //var product_id = value.product_id;
         selectList += "<option value='"+value.product_id+"'>"+value.product_name+"
         </option>";
      }); 
      selectList +="</select>";
      t.parents('tr').find('.item_select').html(selectList);
     }
    });
 });
} 

脚本。
$.noConflict（）；
$（文档）.ready（函数（）{
项目（）；
$（'#addRow'）。单击（函数（）{
警报（“表格”）；
$（“.item\u menu tbody”）.append（$（“.item\u menu tbody tr:last”）.clone（）；
警报（“enter23”）
项目（）；
}); 
$（“#orderdate”）。单击（函数（）{
警惕（“欢迎”）；
变量日期=新日期（）；
var currentMonth=date.getMonth（）；
var currentDate=date.getDate（）；
var currentYear=date.getFullYear（）；
var minDate=新日期（当前年、当前月、当前日期）；
$（“#orderdate”）.datepicker（{dateFormat:'yy-mm-dd'，在ShowDay之前：
});
});   
功能项（）{
$（'.menu_list'）。在（'change'，function（）上{
var菜单=$（this.val（）；
log（$（this.val（））；
var t=$（本）；
t、 父项（'tr'）.find（'item_select'）.html（“kkkk”）；
$.ajax({
url:“/子菜单”，
类型：“POST”，
数据类型：“json”，
数据：{“菜单”：菜单}，
成功：功能（项目）{
var selectList=“”；
$。每个（项目、功能（键、值）{
//var product_id=value.product_id；
选择列表+=“”+值。产品名称+”
";
}); 
选择列表+=“”；
t、 父项（'tr'）.find（'.item_select'）.html（selectList）；
}
});
});
} 

我已经看过你的问题好几次了，但我不确定你想做什么。请使用标点符号以更清晰的方式重写。你也可以写一个包含不同步骤的列表，这样我们可以更好地帮助你。感谢你宝贵的回答Mathieu，但我需要的答案是在附加一行时我使用了克隆（）函数，以便将第一行复制到第二行和第三行，依此类推。我正在尝试从第二行和第三行的选择框中选择一个值。ajax不工作，它显示填充在项目列表中的项目未更改，它仅显示第一行项目。请帮我解决此问题

script.
 $.noConflict();
 $(document).ready(function() {
  Items();
  $('#addRow').click(function(){
  alert("table");
  $('.item_menu tbody').append($(".item_menu tbody tr:last").clone());
  alert("enter23")
  Items();
  }); 
  $("#orderdate").click(function(){
  alert("welcome");
  var date = new Date();
  var currentMonth = date.getMonth();
  var currentDate = date.getDate();
  var currentYear = date.getFullYear();
  var minDate=new Date(currentYear, currentMonth, currentDate);
  $("#orderdate").datepicker({dateFormat:'yy-mm-dd',  beforeShowDay: 
  });
});   
function Items(){
 $('.menu_list').on('change',function() {
 var menus = $(this).val();
 console.log($(this).val());
 var t = $(this);
 t.parents('tr').find('.item_select').html("kkkkk");
    $.ajax({
    url: '/submenu',
    type: "POST",
    dataType: 'json',
    data: {"menu": menus},
    success: function(item) {
      var selectList = "<select name='item'  class='form-control'>";
      $.each(item, function(key, value){
       //var product_id = value.product_id;
         selectList += "<option value='"+value.product_id+"'>"+value.product_name+"
         </option>";
      }); 
      selectList +="</select>";
      t.parents('tr').find('.item_select').html(selectList);
     }
    });
 });
}