jQuery.trigger()函数之后的回调

Question

我这里有一点问题.我必须触发一个包含$ .post()的事件来加载表单并将其分配给DOM.完成此操作后,我编辑了表单的字段.

我试过了:

$.when(function(){
    $('#type_rank_field').trigger('change'); //calls the $.post() to load the form
})
 .done(function(){
    $('#quest_'+questions[i].split('|')[1]).children('option[value="'+questions[i].split('|')[0]+'"]').attr('selected',true);
});

不幸的是,这不起作用,如果我这样离开它:

$('#type_rank_field').trigger('change');
$('#quest_'+questions[i].split('|')[1]).children('option[value="'+questions[i].split('|')[0]+'"]').attr('selected',true);

这种变化甚至看起来像这样:

        $('#type_rank_field').live('change',function(){
        var id = $(this).children('option:selected').attr('id');
        var id_edited = get_id_from_id(id);
        $.post('ajax/load_questions_of_rank.ajax.php',{id: id_edited},function(data){
            //alert(data);
            $('#rank_fields').html(data);
        });
    });

然后在表单正确加载并附加到DOM之前执行表单编辑.对于JavaScript家伙来说这可能是一个愚蠢的问题,但我主要是一个PHP家伙,所以不要残忍:-)

谢谢

Answer 1

可以分离出change处理程序代码吗？像这样的东西:

$('#type_rank_field').on('change',function(){
    handleChange($(this));
});

function handleChange(elem, callback) {
    var id = elem.children('option:selected').attr('id');
    var id_edited = get_id_from_id(id);
    $.post('ajax/load_questions_of_rank.ajax.php',{id: id_edited},function(data){
        //alert(data);
        $('#rank_fields').html(data);
        if (typeof callback === "function") {
            callback(data);
        }
    });
};

然后,在AJAX调用完成时,change您可以调用handleChange传递回调来执行,而不是触发它:

handleChange($("#type_rank_field"), function(data) {
    $('#quest_'+questions[i].split('|')[1])
        .children('option[value="'+questions[i].split('|')[0]+'"]')
        .attr('selected',true);
});

Answer 2

从事件处理程序返回promise对象:

$(document).on('change','#type_rank_field',function(){
    var id = $(this).children('option:selected').attr('id');
    var id_edited = get_id_from_id(id);
    return $.post('ajax/load_questions_of_rank.ajax.php',{id: id_edited},function(data){
        //alert(data);
        $('#rank_fields').html(data);
    });
});

然后使用triggerHandler().

var promise = $('#type_rank_field').triggerHandler('change');
promise && promise.done(function(){
    // do stuff
});

这是一个显示正在使用的功能的简单示例:http://jsfiddle.net/WQPXt/