javascript - 让 JQuery 识别新添加的元素(事件问题已解决，但是...)

Question

首先，这是我的代码。

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 -->';
}?>

问题

我已经修复了事件部分。我使用了你们的事件委托(delegate)

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

但是现在我在操作新添加的元素时遇到了问题我期望的“工作”代码是

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

事件内容

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

可以检测到，但是

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

不能。我尝试将代码放入 #lyr_# div 中的 .load() 内，但它不起作用。我已经在网上搜索过，但找不到答案或类似的内容。

Answer 1

以编程方式修改 <select>的选定选项不会触发 change事件。

在执行更改后，您必须使用以下命令显式触发它:

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

但是，人们通常需要这样做是因为首先设计不正确。我并不是说以这种方式触发事件总是错误的，但如果您触发事件只是因为您希望调用特定的已知行为，那么您最好明确说明您想要的行为。

例如

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

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

最好写成:

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

function someBehavior() {
}

//later

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