从jQuery的变化没有做它应该做的

Question

I have 4 Ajax Scripts that update chained dropdowns based on other one selections

  <script type="text/JavaScript">
   //get a reference to the select element

    $select = $('#building');
    //request the JSON data and parse into the select element
    $.ajax({
      url: '/api/get_building/',
      dataType:'JSON',
      success:function(data){
        //clear the current content of the select
        //iterate over the data and append a select option

        $.each(data, function(key, val){
          $select.append('<option value="' + val.id + '">' + val.as_char  + '</option>');
        })
      },
    });

function getunit() {

    //get a reference to the select element
    $select = $('#unit');
    $id_lease = $('#id_lease');
    $id_leaseterm = $('#id_leaseterm');
    //request the JSON data and parse into the select element

    var c_id = ($("select[name='building'] option:selected").attr('value'));
    c_url = "/api/get_unit/"+c_id+"/";

    $.ajax({

      url: c_url,
      dataType:'JSON',
      success:function(data1){
        //clear the current content of the select
        $select.empty();
        $select.append('<option value="-1"> Select unit </option>');
        $.each(data1, function(key, val){
          $select.append('<option value="' + val.id + '">' + val.as_char  + '</option>');
        })
        getlease();
      },

    });

}

function getlease() {

    //get a reference to the select element
    $select = $('#id_lease');
    $id_leaseterm = $('#id_leaseterm');
    //request the JSON data and parse into the select element
    var s_id = ($("select[name='unit'] option:selected").attr('value'));
    s_url = "/api/get_lease/"+s_id+"/";

    $.ajax({
      url: s_url,
      dataType:'JSON',
      success:function(data1){
        //clear the current content of the select
        $select.empty();
        $select.append('<option value="-1"> Select lease</option>');
        //iterate over the data and append a select option

        $.each(data1, function(key, val){
          $select.append('<option value="' + val.id + '">' + val.as_char  + '</option>');
        })
      },

    });

}



function getleaseterm() {

    //get a reference to the select element
    $select = $('#id_leaseterm');
    //request the JSON data and parse into the select element
    var l_id = ($("select[name='lease'] option:selected").attr('value'));
    //var l_id = 13;
    l_url = "/api/get_leaseterm/"+l_id+"/";

    $.ajax({
      url: l_url,
      dataType:'JSON',
      success:function(data1){
        //clear the current content of the select
        $select.empty();
        $select.append('<option value="-1">Select term </option>');
        //iterate over the data and append a select option

        $.each(data1, function(key, val){
          $select.append('<option value="' + val.id + '">' + val.as_char + '</option>');
        })
      },

    });

}
</script>  

And the following controls in my form I am updating

    <select name="building" id="building" onchange="getunit();">
          <option id="-1">Select building</option>
        </select>



    <select name="unit" id="unit" onchange="getlease();">
          <option id="-1">Select unit</option>
     </select>

   <select class="select" id="id_lease" name="lease">
    <option value="" selected="selected">---------</option>
    </select> 

    <select class="select" id="id_leaseterm" name="leaseterm">
    <option value="" selected="selected"></option>
    </select>

My problem is that when I update the dropdown id_lease it dosent have the on change call. (it is automatically generated from backend)

So for this reason I am adding this line with jquery line in script

 $("#lease_id").on("change", getleaseterm());

but it gives me an error 404 that cannot find the values for "get_leaseterm" since I assume it get triggered when page is loading. And all my script are not loading.

So problem is in this last line. How can I solve it?

Answer 1

As Pointy specified removing the () helped as well I was calling wrong id

final version that worked is:

$("#id_lease").on("change", getleaseterm);