7

我这里有个小问题。我必须触发一个包含 $.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 人，所以不要残忍:-)

谢谢

4

4 回答 4

8

可以分离出你的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);
});
于 2013-02-05T16:43:51.117 回答
7

从您的事件处理程序返回承诺对象：

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

于 2013-02-05T16:48:29.490 回答
2

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

$('#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);
}]);
于 2013-02-05T16:56:52.367 回答
-3

.live自 v1.7 起已在 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 插件来恢复功能。.live()

于 2013-02-05T16:38:05.797 回答