Question

我在页面上附加额外的输入字段时遇到问题，每个输入字段在附加时也有jquery代码来附加与它们相关的其他选择框。基本的html结构如下：

<p id="add_field"> … </p>
<div class="show_sub_categories">
    <div id="sub_cat_1">
    <select class="parent" name="search_category"> … </select>
    <select class="parent" name="sub_category"> … </select>
    </div>
</div>
<div class="show_sub_categories">
    <div id="sub_cat_2">
    <select class="parent" name="search_category"> … </select>
    <select class="parent" name="sub_category"> … </select>
    </div>
</div>

下面的代码会附加选择框但格式不正确。

$(document).ready(function() {

    //$('#loader').hide();

    $('.parent').livequery('change', function() {
        var div = $(".parent").closest("div").attr("id");
        $(this).nextAll('.parent').remove();
        $(this).nextAll('input').remove();

        $('#' + div).append('<img src="images/system/loader2323.gif" style="float:left" id="loader" alt="" />');

        $.post("get_chid_categories.php", {
            parent_id: $(this).val(),
        }, function(response){

            setTimeout(function () { finishAjax(div, response); }, 400);
        });

        return false;
    });
});

function finishAjax(div, response){
    $('#loader').remove();

    $('#'+div).append(unescape(response));
}

get_chid_categories.php只包含sub_category框的代码，其内容由传递给它的parent_id确定。

我有另一个追加功能，它添加了show_sub_categories，sub_cat_'num'和搜索类别选择框。

页面上的所有内容都适用于第一个附加内容，即search_cateogry，sub_category框和正确加载的gif位置。我的问题是随着.show_sub_categories的后续追加，当search_category框被更改为在我上面的代码中运行'change'函数时，加载器gif和相关的sub_category选择框被附加到第一个div。我无法理解为什么它仍然这样做，因为第二页附加的search_category框肯定位于<div id="sub_cat_2">，附加的第三个搜索类别框将在#sub_cat_3之内等，因此当div被定义时......

var div = $(".parent").closest("div").attr("id");

... div ID也应该是#sub_cat_2，然后肯定这意味着加载程序gif和sub_category选择框都会在<div id="sub_cat_2">中正确追加}。如上所述，目前格式化完全是bizaare，无论有多少追加，所有内容都附加到第一个div（ #sub_cat_1 ）。请帮忙，我正在撕扯我的头发！威利。

自从发布此问题以来，我已设法定义div并使用最接近的方式获取选择框所在的div的名称。

Answer 1

你非常接近它：

var pid = $(this).attr('id');

$.post("get_chid_categories.php", {
        parent_id: pid,
    }, function(response){

        setTimeout(function () { finishAjax(pid, response); }, 400);
});

setTimeout接受一个更容易编码的匿名函数。然后你可以将当前的id传递给所有后续函数，使整个代码更通用。

AJAX请求附加到不同的DIV

1 个答案: