How to trigger function when elements are from ajax call

Question

This is test.html File as follows

$(document).ready(function(e) {
    $("#get").click( function() {
     $.ajax({
      type: 'GET',
      url: 'temp.html',
      success: function(data){
       $(".month").html(data);
      }
     });
    });
    
    $("#month").change( function() {
     alert($(this).val());
    }); 
   
   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="get">Get Months</button>
<div class="month"></div>

This is temp.html file as follows

<select id="month">
 <option>--Select Month--</option>
 <option value='1'>Janaury</option>
 <option value='2'>February</option>
 <option value='3'>March</option>
 <option value='4'>April</option>
 <option value='5'>May</option>
 <option value='6'>June</option>
 <option value='7'>July</option>
 <option value='8'>August</option>
 <option value='9'>September</option>
 <option value='10'>October</option>
 <option value='11'>November</option>
 <option value='12'>December</option>
</select>

When user click on button, it will get dropdown button for months I just want to get alert when user change month from dropdown. I could not change temp.html as it is from other server.

`$(".month").on("change", "#month", function() { alert($(this).val()); });` — Satpal, Oct 03 '17 at 12:09

score 1 · Answer 1 · answered Oct 03 '17 at 12:10

Try this

$(document).on("change", "#month", function() { 
  alert($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="month">
 <option>--Select Month--</option>
 <option value='1'>Janaury</option>
 <option value='2'>February</option>
 <option value='3'>March</option>
 <option value='4'>April</option>
 <option value='5'>May</option>
 <option value='6'>June</option>
 <option value='7'>July</option>
 <option value='8'>August</option>
 <option value='9'>September</option>
 <option value='10'>October</option>
 <option value='11'>November</option>
 <option value='12'>December</option>
</select>

How to trigger function when elements are from ajax call

1 Answers1