Question

我有一个下拉列表，它会在AJAX上加载另一个下拉列表 - 下拉列表1显示一个周列表，然后下拉列表2将根据下拉列表1中所选周的有效值进行填充。

当用户从下拉列表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>

最后一段代码将显示div，具体取决于#date下拉列表中的内容：

$(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;

但在初始加载时这些都不适用于我 - 我怎样才能使上述工作正常进行？

Answer 1

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

＆＃13;

var li = document.createElement(...)
li.setAttribute('class','foo')
li.setAttribute('id','bar')
li.innerHTML = '<a class=...'
fragment.appendChild(li);

＆＃13;

Answer 2

由于在页面加载时脚本无法使用第二个下拉列表，因此您必须完全定位正文。

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

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

2 个答案: