javascript - 不知道为什么 jQuery find() 方法不起作用

Question

更新:对于 future 的人们来说，这不是语法问题。正如我最初怀疑的那样，正确加载 html 模板时出现问题，并且复选框更新在完成之前正在运行。因此，如果您要查找的元素似乎不存在，那么情况可能就是如此。 AsyncJS

原文:好吧，我以为我比这更好，但我已经尽力了。我有一个简单的任务管理器网络应用程序。当我的任务对象的状态属性为“true”成功获取请求后时，我想将复选框输入字段的“checked”属性设置为“true”。

在执行此操作之前，我通过调用辅助函数使用 Mustache.js 模板引擎注入(inject)动态 html。我创建了一个回调函数，一旦注入(inject) html 就会执行它，以避免当我将“checked”标记为“true”时什么也不搜索。一切看起来像这样:

DOM:

// AJAX call for getting current tasks
$.ajax({
    url: '/tasks',
    type: 'GET'
}).done(function(response, textStatus, jqXHR){
    $.each($.parseJSON(response), function(i, task){
        insertTask(task, function(){
            if (task.status == true){
                console.log("Task with status of 'true': ");
                console.log(task);
                console.log("Below should be the checkbox");
                console.log($('body').find($('#' + task.id)));
                $('#tasks').find($('#' + task.id)).prop('checked', true);
            }
        });
    });

模板处理程序:

    // Uses the mustache template engine to dynamically insert tasks into DOM
function insertTask(data, callback){
    $.Mustache.load('templates/tasks.html', function() {
        $('#tasks').mustache('main_form', data);
    });
    if (callback && typeof(callback) == 'function'){
        callback();
    }
}

输出:

当我这样做时console.log($('#tasks').find('#' + task.id)); 我得到的只是#tasks对象。即使我只是搜索“li”，它也会返回#task 对象。显然，这听起来好像 html 还没有被注入(inject)。但我不明白鉴于我有回调函数，这怎么可能。

Answer 1

复选框的id类似于2a49...。

您的选择器是$('#tasks').find($('#task_' + task.id)).prop('checked', true);

它编译为

>>$('#tasks #task_2a49....

当它尝试查找 id = task_2a49.... 的元素时，不会返回任何内容。

<小时/>

只需使用，

$('#tasks').find('#'+task.id) 

<小时/>

将对 callback() 的调用放入 .load() 内。在 load() 返回结果之前触发回调。

$.Mustache.load('templates/tasks.html', function() {
    $('#tasks').mustache('main_form', data);

    if (callback && typeof(callback) == 'function'){
        callback();
    }
});