Javascript jQuery.trigger() 函数后的回调
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14712337/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
callback after jQuery.trigger() function
提问by user1377911
i have got a little problem here. I have to trigger an event which contains $.post() to load a form and assign it to a DOM. After this is done, i have edit the fields of the form.
我在这里遇到了一个小问题。我必须触发一个包含 $.post() 的事件来加载表单并将其分配给 DOM。完成后，我编辑了表单的字段。
I tried:
我试过：
$.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);
});
Unfortunately this doesnt work and if i leave it just like that:
不幸的是，这不起作用，如果我就这样离开它：
$('#type_rank_field').trigger('change');
$('#quest_'+questions[i].split('|')[1]).children('option[value="'+questions[i].split('|')[0]+'"]').attr('selected',true);
The change even looks like this:
这种变化甚至看起来像这样：
$('#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);
});
});
Then the form editation is executed before the form is properly loaded and attached to DOM. This might be a stupid question for JavaScript guys, but i am mainly a PHP guy so dont be cruel :-)
然后在表单正确加载并附加到 DOM 之前执行表单编辑。对于 JavaScript 的人来说，这可能是一个愚蠢的问题，但我主要是一个 PHP 人，所以不要太残忍:-)
Thanks
谢谢
回答by Matt Burland
Can separate out your changehandler code? Something like this:
可以分离出你的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);
}
});
};
Then instead of triggering the changeyou can just call handleChangepassing a callback to execute when the AJAX call is complete:
然后，change您可以调用handleChange传递回调以在 AJAX 调用完成时执行，而不是触发：
handleChange($("#type_rank_field"), function(data) {
$('#quest_'+questions[i].split('|')[1])
.children('option[value="'+questions[i].split('|')[0]+'"]')
.attr('selected',true);
});
回答by Kevin B
Return the promise object from your event handler:
从您的事件处理程序返回承诺对象：
$(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);
});
});
and then use triggerHandler()instead.
然后triggerHandler()改用。
var promise = $('#type_rank_field').triggerHandler('change');
promise && promise.done(function(){
// do stuff
});
Here's a simple example showing the functionality being used: http://jsfiddle.net/WQPXt/
这是一个显示正在使用的功能的简单示例：http: //jsfiddle.net/WQPXt/
回答by Jing
I think we have to add callback after posted
我认为我们必须在发布后添加回调
$('#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
}
});
the trigger change will look like this
触发器更改将如下所示
$('#type_rank_field').trigger('change', [function(){
$('#quest_'+questions[i].split('|')[1]).children('option[value="'+questions[i].split('|')[0]+'"]').attr('selected',true);
}]);
回答by ROY Finley
.livehas been deprecated in jQuery since v1.7, and has been removed in v1.9.
.live自 v1.7 以来，jQuery 已弃用，并已在 v1.9 中删除。
You should replace it with .on().
您应该将其替换为.on().
.onhas 2 signatures for binding elements, whereas .liveonly had 1.
.on有 2 个绑定元素的签名，而.live只有 1 个。
If the element exists at the time you are binding, you do it like this:
如果元素在您绑定时存在，您可以这样做：
$('.element').on('click', function(){
.......
});
You can even use the shorthand:
你甚至可以使用简写：
$('.element').click(function(){
.........
});
If the element does not exist at the time, or new ones will be added (which is what .livewas normally used for), you need to use "event delegation":
如果该元素当时不存在，或者将添加新元素（这是.live通常使用的），则需要使用“事件委托”：
$(document).on('click', '.element', function(){
........
});
NOTE: You want to bind to the closest static element, not always document.
注意：您希望绑定到最近的静态元素，而不总是document.
In the meantime, the jQuery Migrate plugincan be used to restore the .live()functionality if you upgrade your jQuery to the newest version.
同时，如果您将 jQuery 升级到最新版本，可以使用jQuery Migrate 插件来恢复.live()功能。
