我有一个带有下拉列表的页面和“添加新”中的选项之一。为它创建的函数效果很好。

$('#town_id').on('change', function(){
    if($(this).val() == "ADD_NEW"){
        console.log('Add New');
        $('#town_id').val('');
        $('#town_id').trigger('chosen:updated');
        $('#modal-1').modal('show');
    }
});

问题是，有时选择框根本不会出现在页面上，我将使用 jquery 将其附加到页面中。这一部分也可以工作，但是在运行上面的代码时，不会拾取从 jquery 添加的 ADD NEW 。如果我将上面的代码放在添加选择代码下，然后在下拉列表中选择“添加新”，则可以正常工作。

// remove towns text
$('.towns').html('<select class="form-control chosen add_town" name="town_id" id="town_id" data-rule-required="true" data-placeholder="Choose a town"></select');
$("#town_id").chosen({disable_search_threshold: 15});
$("#town_id").css('width', '100%');


// add chosen select
$('#town_id').append('<option value="' + result.id + '" selected>' + result.name + '</option>');
$('#town_id').append('<option value="ADD_NEW">Add new town...</option>');
$('#town_id').trigger('chosen:updated');

有没有办法让它工作而不重复选择代码？

是的，有一个解决方案。您必须使用委托，因为 HTML 元素是动态创建的。

考虑到.townselement 选择框的容器和#town_id选择框的语法如下所示：

$('.towns').on('change', '#town_id', function(){
    if($(this).val() == "ADD_NEW"){
        console.log('Add New');
        $('#town_id').val('');
        $('#town_id').trigger('chosen:updated');
        $('#modal-1').modal('show');
    }
});

是的，这适用于静态和动态选择框。

直接和委托事件

When a selector提供后，事件处理程序被称为委托的。当事件直接发生在绑定元素上时，不会调用处理程序，但是仅适用于与选择器匹配的后代（内部元素）. [...]

事件处理程序仅绑定到当前选定的元素；当您的代码调用时，它们必须存在于页面上.on().

阅读更多 https://api.jquery.com/on/#direct-and-delegated-events