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

时间:2014-11-26 13:46:22

标签: javascript jquery

这里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之外,如何让它工作?

3 个答案:

答案 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'); }