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插件，使用View生成的源我看到这样的

 <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

那将是事件授权。页面加载时，元素不存在;事件委托提供了一种将事件处理程序附加到和将来元素的方法：

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

Answer 2

请参阅http://jsfiddle.net/r5ktrt51/10/

使用

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

因为您的元素是动态添加的。

Answer 3

您需要在添加项目后附加on change事件。你不能提前设置它。您可以在$ .post

中执行类似的操作

$('.upper_level_id').change(function(){upperLevelChange();});

和外面

function upperLevelChange() { alert('upper level id changed'); }

$ .post外部的jquery函数不起作用

3 个答案: