2

我有一个表单，我正在通过 jQuery 的加载函数向其中动态添加新的输入和选择元素。有时加载的元素故意为空，在这种情况下，我想隐藏容器 div，这样它就不会破坏样式。

问题是，我似乎无法计算加载的元素，因此不知道它是否应该隐藏。

例如我有这个：

<div id="param_container"></div>

在一些下拉菜单更改中，我绑定了此功能：

alert($('#param_container').children().length);

// Returns and loads new element correctly. Can be empty.
$('#param_container').load('/get_params', {cat:category});

if ($('#param_container').children().length ) {
    $('#param_container').css('display', 'block');
} else {
    $('#param_container').css('display', 'none');
}

alert($('#param_container').children().length);

即使添加了新的子元素，子元素的长度也始终为 0。

有什么想法吗？

编辑：

我的解决方案

$('#param_container').load('/get_params', {cat:category}, function(response) {
    if (response) {
        $('#param_container').css('display', 'block');
    } else {
        $('#param_container').css('display', 'none');
    }
});
4

3 回答 3

6

原因是load调用是异步的，它在你的函数返回后完成。

您可以使用成功回调，如下所示：

alert($('#param_container').children().length);

// Returns and loads new element correctly. Can be empty.
$('#param_container').load('/get_params', {cat:category}, function() {
    if ($('#param_container').children().length ) {
        $('#param_container').css('display', 'block');
    } else {
        $('#param_container').css('display', 'none');
    }

    alert($('#param_container').children().length);
});
于 2012-12-11T10:38:18.210 回答
2

您需要从 div 的 id 中删除 # 即

你写了：

<div id="#param_container"></div>

你需要：

<div id="param_container"></div>

当您在 jQuery 中编写 $('#param_container') 时，这意味着您是一个元素，其中 id 等于没有“#”符号的字符串。所以你不需要将它包含在 html 代码中。

于 2012-12-11T10:36:19.637 回答
0

您可以在此处尝试使用加载 API 提到的完整回调

如果提供了“完成”回调，则在执行后处理和 HTML 插入后执行。

$('#param_container').load('/get_params', {cat:category}, 
function() {
if ($('#param_container').children().length ) {
    $('#param_container').css('display', 'block');
} else {
    $('#param_container').css('display', 'none');
}
}
);
于 2012-12-11T10:54:33.557 回答