javascript - $.post 函数之外的 jquery 无法使用另一个函数

Question

这里http://jsfiddle.net/r5ktrt51/8/放置类似的东西，但真正的代码是这样的

var select_id = 0;
get_top_level_categories = true;

if ( get_top_level_categories == true ){

    $.post("___ajax_get_top_level_categories.php", function(top_level_categories) {

    var top_level_categories = $.parseJSON( top_level_categories );

    $('#span_upper_level_name').append( '<select name="upper_level_id' + select_id + '" id="upper_level_id' + select_id + '" class="upper_level_id" width="135" style="width: 136px"></select>' );

    $('<option/>').val('select').html('Select').appendTo('#upper_level_id' + select_id );

    $.map( top_level_categories, function( val ) {
    $('<option/>').val(val.IdRows).html(val.CategoriesName).appendTo('#upper_level_id' + select_id);
    });

    });

}//if ( get_top_level_categories == true ){

结果我使用firefox插件，通过查看生成的源代码我看到这样

 <span id="span_upper_level_name">
 <select name="upper_level_id0" id="upper_level_id0" class="upper_level_id" width="135" style="width: 136px">
 <option value="select">Select</option>
 <option value="2">Transport</option>
 <option value="3">Work and business</option>
 </select>
 </span>

这里是class="upper_level_id"。所以我希望如果我更改下拉框中的值(选项)，那么会看到带有此代码的警报

$('.upper_level_id').change(function(){ 
alert('upper_level_id changed');
});

但没有看到任何警报。

如果我将最后一个代码放在 $.post 函数中，则一切正常(请参阅警报)。

如果最后一个代码位于 $.post 之外，如何让它工作？

Answer 1

这就是事件委托(delegate)。页面加载时，该元素不存在；事件委托(delegate)提供了一种将事件处理程序附加到当前和 future 元素的方法:

$(document).on('change', '.upper_level_id', function(){ 
    alert('upper_level_id changed');
});

参见:jQuery.live() | jQuery API Documentation

$( selector ).live( events, data, handler );                // jQuery 1.3+
$( document ).delegate( selector, events, data, handler );  // jQuery 1.4.3+
$( document ).on( events, selector, data, handler );        // jQuery 1.7+