Question

我有一个表单，我正在动态添加新的输入＆amp;通过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);

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

有什么想法吗？

编辑：

我的解决方案

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

Answer 1

原因是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);
});

Answer 2

你需要从div的id中删除＃，即

你写道：

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

你需要：

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

当你在jQuery中编写$（'＃param_container'）时，它意味着你是一个id等于没有'＃'符号的字符串的元素。所以你不需要把它包含在html代码中。

Answer 3

您可以使用加载API here

尝试完整回调

如果提供了“完整”回调，则会在后处理和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');
}
}
);

jQuery：动态加载元素的大小/长度

3 个答案: