使用AJAX加载html后,为什么jQuery更改函数不起作用？

Question

我加载一个表单并从PHP文件中通过AJAX动态填充select.在实现动态AJAX填充选择之前,我的更改功能有效(当用户选择"其他"时,它只显示另一个输入).现在改变功能不起作用.

我知道ready函数正在触发,因为jStepper函数运行.我已尝试使用ready函数内外的更改函数.我觉得在AJAX get完成之前加载了更改函数,但这真的很重要吗？

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() { 

编辑3:在更仔细地检查您的代码之后,这将表现最佳:

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

因为它最接近有问题的元素.

您还应该将ajax调用放在我认为的准备好的脚本中.

发生这种情况的原因是DOM在实例化时没有任何东西可以绑定到它.以这种方式使用.on将其绑定到文档.如果你有另一个包含它的"固定"元素,那么使用它来代替"文档"绑定可能会更好,因为它可能会表现得更好.

编辑:请注意,在将元素作为ajax调用完成的一部分注入后,您也可以添加更改事件管理,但是如果您多次执行此操作,则应该首先取消绑定它.

EDIT2:既然有问题/意见:来自文档:http://api.jquery.com/on/

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