用AJAX加载html后，为什么jQuery更改功能不起作用？

Question

我加载表单并通过AJAX从PHP文件中动态填充选择。在实现动态的AJAX填充选择之前，我的change函数起作用（当用户选择“
other”时，它仅显示另一个输入）。现在，更改功能不起作用。

我知道ready函数正在触发，因为jStepper函数正在运行。我已经在ready函数的内部和外部使用change函数进行了尝试。我感觉在AJAX获取完成之前加载了change函数，但这真的重要吗？

var types = "<select name='ve_categoryNo' id='ve_categoryNo'>";
var d = new Date();
$.get('scripts/vehicle_category_feed.php?date=' + d.getTime(), function ($type)
{
    $($type).find('type').each(function ()
    {
        types += "<option value='" + $(this).attr("categoryno") + "'>" + $(this).attr("category") + "</option>";
    });
    types += "<option value='other'>Other(Specify)</option></select>";
    $('#ve_categoryNo_td').html(types);
});
$(document).ready(function ()
{
    $('input[type=text]').click(function ()
    {
        $(this).select();
    });
    $('#vehicle_entry').ajaxForm(function ()
    {
        showMessage('vehicle_information_added');
    });
    $('#ve_ariNo').jStepper({minValue: 1, maxValue: 99999999});
    $('#ve_fleetNo').jStepper({minValue: 1, maxValue: 999999999});
    $('#ve_vehicleYear').jStepper();
    $('#ve_purchasePrice').jStepper({minValue: 0});
    $('#ve_categoryNo').change(function ()
    {
        if ((this.value) == "other")
        {
            $('#otherCategory').show();
            $('#otherCategory input[type=text]').focus();
        } else
        {
            $('#otherCategory').hide();
        }
    });
});

Answer 1

修改此：

$('#ve_categoryNo').change(function() {

至

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

EDIT3：在更仔细地检查您的代码后，这将表现最佳：

   $('#ve_categoryNo_td').on('change', '#ve_categoryNo', function() {

因为它最靠近所讨论的元素。

您还应该将ajax调用放入我认为的就绪脚本中。

发生这种情况的原因是，在实例化DOM时，没有任何内容要绑定。以这种方式使用.on会将其绑定到文档。如果您有另一个“固定”元素来包装它，则最好使用该元素代替“文档”来绑定该元素，因为它可能会更好。

编辑：请注意，在将元素作为ajax调用完成的一部分注入后，您也可能会添加更改事件管理，但是如果多次执行此操作，则在这种情况下应首先将其解除绑定。

EDIT2：由于存在问题/评论：从文档：http :
//api.jquery.com/on/

在文档树的顶部附近附加许多委托的事件处理程序可能会降低性能。每次事件发生时，jQuery必须将该类型所有附加事件的所有选择器与从事件目标到文档顶部的路径中的每个元素进行比较。为了获得最佳性能，请在尽可能靠近目标元素的文档位置附加委托事件。避免在大型文档上的委托事件中过度使用document或document.body。