使用 jquery 从新添加的行触发对现有表的 ajax 调用

Question

我正在尝试在表格中查看学生详细信息。最初，我的表只有一行，其中存在 3 列 University、Department 和 Names。当我从大学下拉列表中选择一所大学时，会触发一个 ajax 调用，它会在部门下拉列表中填充该大学可用的相应部门。当我选择部门时，会触发第二个 ajax 调用，它会根据大学和部门下拉列表中的值填充名称下拉列表。

当我想搜索下一个学生时，我单击添加按钮，它会呈现下一行。但是，在这个新添加的行中，当我从下拉列表中选择一所大学时，不会触发 ajax 调用。

你能帮我实现吗？

学生.html

<div>
    <input type="button" value="Add" class="plusbtn1" />
</div>
<table border="0" width="80%" id="mytable">
    <tr>
        <td class="lightGrayedTD">University</td>
        <td class="lightGrayedTD">Department</td>
        <td class="lightGrayedTD">Student Names</td>
    </tr>
    <tr>
        <td>
            <select id="University">
                <option value="IT" >NYU</option>
                <option value="CSC">NYU Poly</option>
                <option value="EEE">Business School</option>
            </select>
        </td>
        <td>
            <select id="year">
                <option value=""> --Select Year-- </option>
            </select>
        </td>
        <td>
            <select id="names">
                <option value="" label=""> --Select Name-- </option>        
            </select>
        </td>
    </tr>
</table>

添加.js

$('.plusbtn1').click(function(){
    $('#mytable tr').last().after(
        '<tr>
            <td>
                <select id="University">
                    <option value="IT" >NYU</option>
                    <option value="CSC">NYU Poly</option>
                    <option value="EEE">Business School</option>
                </select>
            </td>
            <td>
                <select id="year">
                    <option value=""> --Select Year-- </option>
                </select>
            </td>
            <td>
                <select id="names">
                    <option value="" label=""> --Select Name-- </option>
            </select>
        </td>
    </tr>'
    );
});

ajax.js

//populating Department dropdown
$('#dept').change(function(event) {
    var dept = $('#dept :selected').text();       
    $.get("ajax.html", {
        deptName : dept
    }, function(response) {
        var select = $('#year');
        select.find('option').remove();
        $.each(response, function(index, value) {
            $('<option>').val(value).text(value).appendTo(select);
        });
    });
});

//populating names dropdown
$('#year').change(function(event) {
    var dept = $('#dept :selected').text();
    var year = $('#year :selected').text();      
    $.get("ajax1.html", {
        dept : dept,
        year : year
    }, function(response) {
        var select = $('#names');
        select.find('option').remove();
        $.each(response, function(index, value) {
            $('<option>').val(value).text(value).appendTo(select);
        });
    });
});

ajax 和 ajax1

@RequestMapping(value = "/ajax", method = RequestMethod.GET)
@ResponseBody   
public void ajax(HttpServletRequest request, HttpServletResponse  response) 
throws IOException {
    String uni = request.getParameter("universityName");
    List<Integer> list = new ArrayList<Integer>();
    list=cheDao1.retrievedept(uni);
    String json = new Gson().toJson(list);
    response.setContentType("application/json");
    response.getWriter().write(json);
}

@RequestMapping(value = "/ajax1", method = RequestMethod.GET)
@ResponseBody
public void ajax1(HttpServletRequest request, HttpServletResponse
    response) throws IOException {
    String uni = request.getParameter("universityName");
    String dept = request.getParameter("deptName");
    List<Integer> list = new ArrayList<Integer>();
    list=cheDao1.retrievenames(uni,dept );
    String json = new Gson().toJson(list);
    response.setContentType("application/json");
    response.getWriter().write(json);
}

Answer 1

这是一个常见问题解答。

1. ID 必须是唯一的，所以使用类。
2. 使用委托：

$("#mytable").on("change",".year",function{ .... } $("#mytable").on("change",".dept",function{ .... }

1. 请注意，使用不同的参数调用一个服务器进程会使代码更简单 - 特别是如果您将上下文和 select 名称传递给它，但我没有更改主要逻辑。

WORKING DEMO

假设返回的数据在表单上

{"1":"dept1","2":"dept2","3":"dept3"}

$(function() { 
  var $clonerow = $("#mytable tr").clone();
  $('.plusbtn1').on("click",function() {
    $('#mytable tr').last().after($clonerow);
  });

  //populating Department dropdown
  $(document).on("change",'.University',function(event) {
    var $row = $(this).closest("tr");
    var uni = $(':selected',this).text();
    if (uni.indexOf("--") !=-1) return;
    $.ajax({
        url: "ajax.html",
        context: $row,
        data: {universityName:uni},
        success: function(response) {
          console.log($(this),response);
          var $select = $(this).find('.dept').empty();
          $('<option>').val("").text(" --Please select dept.--").appendTo($select);
          $.each(response, function(index, value) {
            $('<option>').val(value).text(value).appendTo($select);
          });
          $select.append(response);
        }  
    });
  }); 
  $(document).on("change",'.dept',function(event) {
    var $row = $(this).closest("tr");
    var uni = $row.find('.University :selected').text();
    if (uni.indexOf("--") !=-1) return; // please select
    var dept = $(':selected',this).text();
    if (dept.indexOf("--") !=-1) return;
    $.ajax({
        url: "ajax1.html",
        context: $row,
        data: {universityName: uni,
               deptName: dept},
        success: function(response) {
          console.log($(this),response);
          var $select = $(this).find('.year').empty();
          $('<option>').val("").text(" --Please select year.--").appendTo($select);
          $.each(response, function(index, value) {
            $('<option>').val(value).text(value).appendTo($select);
          });
         $select.append(response);
        }  
    });
  });

  //populating names dropdown
  $(document).on("change",'.year',function(event) {
    var $row = $(this).closest("tr");
    var uni = $row.find('.University :selected').text();
    if (uni.indexOf("--") !=-1) return; // please select
    var dept = $row.find('.dept :selected').text();
    if (dept.indexOf("--") !=-1) return; // please select
    var year = $(':selected',this).text();
    if (year.indexOf("--") !=-1) return; // please select
    $.ajax({
        url: "ajax2.html",
        context: $row,
        data:{universityName: uni,
              deptName: dept,
              year: year},
        success: function(response) {
          var $select = $(this).find('.names').empty();
          $('<option>').val("").text(" --Please select name --").appendTo($select);
          $.each(response, function(index, value) {
            $('<option>').val(value).text(value).appendTo($select);
          });
          $select.append(response);
        }  
    });
  });
});