Question

我正在通过AJAX加载表单...我有我认为是一个获胜的jQuery语句，但它没有做任何事情：

$("#input_form_container").loadActionTemplate()
                          .find ('.form-focus:first').focus();

loadActionTemplate是我为加载表单而创建的函数。它确实加载表单，然后返回对“this”的引用，以便链接可以继续。目标元素是一个文本输入字段，如下所示：

<input class="span1 form-focus" id="min-duration" name="min-duration" size="16" type="text">

注意：

如果我在加载运行此脚本之后进入调试器（因此在加载模板之后）并运行“jQuery（”＃input_form_container“）。find（'。form-focus：first'）。focus（） ;”从调试器开始，它通过突出显示字段并返回DOM引用以供将来链接使用，就像魅力一样。
如果我输入：

jQuery（“＃input_form_container”）。loadActionTemplate（）。find（'。form-focus：first'）。focus（）;

直接进入调试器，重新加载模板并返回对正确DOM元素的引用，但未实现焦点
在绝望中我尝试在focus（）调用之前插入一个延迟（500），但这不是必需的，并且无论如何都没有解决问题。

非常感谢任何帮助。

Answer 1

正如@Andreas所指出的，AJAX毕竟是异步的。我自欺欺人地相信我以某种方式构建的jQuery链只会触发AJAX回调的success（）条件。为什么我认为这只能指向缺乏睡眠，缺乏高质量的咖啡因和/或安非他明。无论如何，在尝试共享解决方案时，这是我的“loadActionTemplate”jQuery扩展：

$.fn.extend({
    // loadActionTemplate plugin
    loadActionTemplate: function(options) {
        //default settings
        var defaults = {
            actionDOM : '#do_something_dropdown',
            cache : true
        }
        // store the "this" state for safe keeping
        var domElements = $(this);
        // merge user options into default
        var options = $.extend(defaults, options);
        // assign the "action" to an easily addressible variable
        var action = $(options.actionDOM).val();
        // get the HTML form template for this action
        LG_ServiceCall ( 'get-action-template' , {'action' : action} , function( r ) {
            var res = JSON.parse ( r );
            var template = res.results.template;
            // iterate through all matched DOM instances
            return domElements.each(function() {
                // get handle on DOM object operating on
                var element = $(this);
                element.html( template );
                element.find('.form-focus:first').focus();
            })
        });
        return domElements; // allows the function to operate in a chain
    }
});

LG_ServiceCall方法没有涉及太多痛苦的细节，需要三个参数：

function LG_ServiceCall( $service , $options , $callback );

调用AJAX.success（）方法时，调用传递给第三个参数的回调函数：

requestObj.success = function (r) {
    console.log ("Successful AJAX Call ( " + JSON.stringify (r) + ")");
    callback (r);
}

在AJAX加载后为DOM元素提供焦点

1 个答案: