Triggering an ajax call from a newly added row using jquery to the existing table

Triggering an ajax call from a newly added row using jquery to the existing table

I'm trying to view student details in a table. Initially, my table has only one row, where 3 columns University, Department and Names are present. When I select a university from the university drop down, an ajax call is triggered and it populates the corresponding departments available in that university in the department drop down. when I choose the department, a second ajax call is triggered which populates the names drop down based on the value in the university and department dropdowns.

When I want to search for the next student, I click on the add button, which renders the next row. However, In this newly added row, when I select a university from the dropdown, ajax call is not triggered.

Can you help me achieve this?

Student.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>

Add.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); });