通过 AJAX 加载选择时 jQuery 触发更改答案

【问题标题】：jQuery trigger change on loading a select via AJAX通过 AJAX 加载选择时 jQuery 触发更改
【发布时间】：2018-01-18 23:18:54
【问题描述】：

我有一个下拉列表，它通过 AJAX 加载另一个下拉列表 - 下拉列表 1 显示周列表，然后根据下拉列表 1 中选择的周的有效值填充下拉列表 2。

当用户从下拉菜单 2 中选择一个项目时，我正在使用更改事件在屏幕上向他们显示文本。

除了在第一次加载下拉菜单 2 时不会触发更改事件之外，所有这些都可以正常工作。

代码如下：

<select name="wb" id="wb" class="form-control">
<option value="2018-01-01">2018-01-01</option>
<option value="2018-01-08">2018-01-08</option>
<option value="2018-01-15">2018-01-15</option>
<option value="2018-01-22">2018-01-22</option>
<option value="2018-01-29">2018-01-29</option>
</select>

<select id="date" class="form-control" name="date"></select>

<div id="previous_disp"></div>

获取日期并填充下拉列表 2 的代码：

function getDays() {
    var week = $("#wb").val();
    var uid = $("#uid").val();
    $.ajax({
        type : "GET",
        url: 'days.php?week='+week+'&uid='+uid,
        success : function(data){
            $('#date').html(data); 
        }
    })
}

days.php 然后生成如下选项列表，这些选项将填充到下拉列表 2 (#date) 中：

<option value='2018-01-15'>Mon 15/01/2018</option>
<option value='2018-01-18'>Thu 18/01/2018</option>
<option value='2018-01-19'>Fri 19/01/2018</option>

最后一段代码是根据#date 下拉菜单中的内容显示 div：

$(function() {              
    $("#date").change(function () {
        var day = $(this).val();
        var uid = $("#uid").val();
        $.ajax({
            type : "GET",
            url: 'previousEntries.php?day='+day+'&uid='+uid,
            success : function(data){
                $('#previous_disp').html(data); 
            }
        })              
    });    
})

当使用它时，第一次加载 #date 时不会触发更改，因此 #previous_disp 永远不会显示 - 如果我随后实际更改 #date 的值，它会完全按预期工作

根据我从广泛搜索中找到的先前答案，我尝试了一些变体，例如：

$(function() {              
    $("#date").change(function () {
       ....
    }).change();    
})

还有

$(function() {              
    $("#date").change(function () {
       ....
    });    
})

$("#date").change;

但在初始负载时这些都不适合我 - 我怎样才能让上述工作正常工作？

【问题讨论】：

由于事件是在动态加载的元素上，我会使用$("#date").on("change",function () {..
不幸的是仍然没有区别，感谢您的回复
另一个想法：如果你在 Ajax 成功回调中调用 #date 的 change 函数会怎样？
还是不想工作！尝试完成，然后在 ajax 和相同结果之后调用函数
我打赌这很傻。如果您将事件附加到 document 会怎样：$(document).on('change', '#date', function() {...

标签： jquery ajax onchange

【解决方案1】：

由于页面加载时第二个下拉列表对脚本不可用，因此您必须将主体定位为最佳。

$('body').on('change', '#dropdown2', function(){
    //some stuff
})

【讨论】：

【解决方案2】：

由于事件发生在动态加载的元素上，我会使用：

$(document).on('change', '#date', function() {...

【讨论】：