0

我正在通过 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() 调用之前插入一个 delay(500) ，但这不是必需的，也没有解决问题。

任何帮助将不胜感激。

4

1 回答 1

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);
}
于 2012-10-01T22:47:55.187 回答