这里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
之外,如何让它工作?
答案 0 :(得分:2)
那将是事件授权。页面加载时,元素不存在;事件委托提供了一种将事件处理程序附加到和将来元素的方法:
$(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+
答案 1 :(得分:1)
请参阅http://jsfiddle.net/r5ktrt51/10/
使用
$(document).on('change', '.upper_level_id', function(){
alert('upper_level_id changed 2');
});
因为您的元素是动态添加的。
答案 2 :(得分:0)
您需要在添加项目后附加on change事件。你不能提前设置它。 您可以在$ .post
中执行类似的操作$('.upper_level_id').change(function(){upperLevelChange();});
和外面
function upperLevelChange() { alert('upper level id changed'); }