1

我在页面上附加附加输入字段时遇到问题，每个附加输入字段在附加时也有 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 框更改为在我上面的代码中运行“更改”功能时，加载程序 gif 和相关的sub_category选择框被附加到第一个div. 我一生无法理解为什么它仍然这样做，因为附加到页面第二个的 search_category 框肯定位于，附加的<div id="sub_cat_2">第三个搜索类别框将在#sub_cat_3etc 等中，因此当 div 被定义时......

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

... divid 也应该是#sub_cat_2，然后肯定意味着加载器 gif 和sub_category选择框都将正确附加在我的<div id="sub_cat_2">. 如前所述，目前格式化完全是奇怪的，因为无论进行了多少附加，所有内容都附加到第一个div（#sub_cat_1）。请帮忙，我把头发扯掉了！威利。

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

4

1 回答 1

0

你非常接近它：

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

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

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

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

于 2013-06-23T12:27:16.723 回答