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);
        }
    });
};

然后，不是触发change，而是可以调用handleChange传递回调，以便在AJAX调用完成时执行：

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/

Answer 3

我认为我们必须在发布后添加回调

$('#type_rank_field').on('change', function(ev, cb){
    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);
        // add after callback to make sure that html is inserted
        if(typeof cb == "function"){
           cb.apply($(this)) // this apply with the jq object context or another context u want
        }
 });

触发器更改将如下所示

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

Answer 4

自v1.7以来，

.live已在jQuery中弃用，并已在v1.9中删除。

您应该将其替换为.on()。

.on有2个绑定元素签名，而.live只有1个。

如果绑定时元素存在，则按以下方式执行：

$('.element').on('click', function(){
  .......
});

您甚至可以使用简写：

$('.element').click(function(){
  .........
});

如果该元素当时不存在，或者将添加新元素（通常用于.live），则需要使用“事件委托”：

$(document).on('click', '.element', function(){
  ........
});

注意：您希望绑定到最近的静态元素，而不是document。

与此同时，如果将jQuery升级到最新版本，jQuery Migrate plugin可用于恢复.live()功能。

jQuery.trigger（）函数之后的回调

4 个答案: