Making JQuery Recognise Newly Added Elements (Event Prob Solved but...)

Question

Firstly, here's my code.

HTML

<div class="panel-body">
    <div class="col-md-3">
        <label for="trans_type">Transaction Type</label>
        <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-group fa-fw"></i></span>
            <select class="selectpicker form-control"  data-live-search="true"  id="trans_type" name="trans_type" required>
                <option value="" selected>Select a Transaction Type</option>
                <option value=0>Class Experiment</option>
                <option value=1>Borrowment</option>
             </select>
         </div>
         <!-- /.input-group -->
     </div>
     <!-- /.col-md-3 -->
     <div class="col-md-3" id="lyr_1">
     </div>
     <!-- /.col-md-3 #lyr_1 -->
     <div class="col-md-3" id="lyr_2">
     </div>
     <!-- /.col-md-3 #lyr_2 -->
     <div class="col-md-3" id="lyr_3">
     </div>
     <!-- /.col-md-3 #lyr_3 -->
     <div class="row"><br><br><br><br>
     </div>
     <!-- /.row -->
     <div class="col-md-3" id="lyr_4">
     </div>
     <!-- /.col-md-3 #lyr_4 -->
 </div>
 <!-- /.panel-body -->

Javascript

$(document).ready(function() {
    $("#trans_type").change(function() {
        if($("#trans_type").val() == 0) {
            $("#lyr_1")
                .html("<img src='assets/loader1.gif' class='text-center' alt='loading...' />")
                .load('models/getborreq_fields_model.php?mode=0', {}, function() {
                $('#trans0_adv').selectpicker('refresh');
            });
            $("#lyr_2")
                .html("<img src='assets/loader1.gif' class='text-center' alt='loading...' />")
                .load('models/getborreq_fields_model.php?mode=1', {}, function(){
                $('#trans0_sub').selectpicker('refresh');
            });
            $("#lyr_3")
                .html("<img src='assets/loader1.gif' class='text-center' alt='loading...' />")
                .load('models/getborreq_fields_model.php?mode=2', {}, function(){
                $('#trans0_exp').selectpicker('refresh');
            });
            $("#lyr_4")
                .html("<img src='assets/loader1.gif' class='text-center' alt='loading...' />")
                .load('models/getborreq_fields_model.php?mode=3', {}, function(){
                $('#trans0_grp').selectpicker('refresh');
            });
        } else if ($("#trans_type").val() == 1) {
            $("#lyr_1, #lyr_2, #lyr_3, #lyr_4").empty();
        }
    });
});

PHP

<?php
require_once '../classes/dbc_get_bor.php';
session_start();
$db_call = new dbc_get_bor();
if ($_GET["mode"] == 0) {
    echo '<label for="trans0_adv">Subject Adviser</label>
    <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-group fa-fw"></i></span>
        <select class="selectpicker form-control"  data-live-search="true"  id="trans0_adv" name="trans0_adv" required>
            <option value="" selected>Select an Adviser</option>';
            $db_call->get_faculty();
        echo '</select>
    </div>
    <!-- /.input-group -->';
} else if ($_GET["mode"] == 1) {
    echo '<label for="trans0_sub">Subject Code</label>
    <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-group fa-fw"></i></span>
        <select class="selectpicker form-control"  data-live-search="true"  id="trans0_sub" name="trans0_sub" required>
            <option value="" selected>Select an Adviser First</option>
        </select>
    </div>
    <!-- /.input-group -->';
} else if ($_GET["mode"] == 2) {
    echo '<label for="trans0_exp">Experiment #</label>
    <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-group fa-fw"></i></span>
        <select class="selectpicker form-control"  data-live-search="true"  id="trans0_exp" name="trans0_exp" required>
            <option value="" selected>Select a Subject First</option>
        </select>
    </div>
    <!-- /.input-group -->';
} else if ($_GET["mode"] == 3) {
    echo '<label for="trans0_grp">Group #</label>
    <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-group fa-fw"></i></span>
        <select class="selectpicker form-control"  data-live-search="true"  id="trans0_grp" name="trans0_grp" required>
            <option value="" selected>Select a Subject First</option>
        </select>
    </div>
    <!-- /.input-group -->';
}?>

The Problem

I already fixed the Event part. I used what you guys Event Delegation by using

$( "#example" ).on( "click", "#example", function() {})

But now I'm getting problems when manipulating a newly added element My expected "working" code here is

$('#lyr_1').on('change', '#trans0_adv', function () {
        $("#trans0_sub").html("<option value="" selected>Select Adviser's Subjects</option>");
    });

The event

$('#lyr_1').on('change', '#trans0_adv', function () {}

Can be detected but

$("#trans0_sub").html("<option value="" selected>Select Adviser's Subjects</option>");

can't. I tried to put the code inside .load() in #lyr_# divs but it doesn't work. I searched the web already but can't find an answer or anything similar to it.

Answer 1

Programmatically modifying a <select>'s selected option will not trigger the change event.

You will have to trigger it explicitely after performing the change using something like:

$("#trans0_sub").trigger('change');

However, people usually need to do this because of an incorrect design in the first place. I'm not saying it's always wrong to trigger events that way, but if you trigger the event just because you want a specific known behavior to be invoked, you would be better to explicitely state the behavior that you want.

E.g.

$('#some-select').change(function () {
    //some behavior
});

//later
$('#some-select').val(someValue).trigger('change');

Would be better written as:

$('#some-select').change(function () {
    someBehavior();
});

function someBehavior() {
}

//later

$('#some-select').val(someValue);
someBehavior();

Answer 2

The change events works only if the user interacts with the element, so, to work, you will have to activate the event by hand, like

$('select').html('blabla').change();

With this you may be able to achieve what you want :)