javascript - 为什么 JQuery 不附加 'finding' div？

Question

我有一个函数，当使用以下代码段单击按钮时，它会将一些 HTML 附加到表单中的某个部分:

function add_series() {
    $(document).on("click", "a.add-another-series", function(e) {
        e.preventDefault();

        // Get the containing div that we will append the retrieved HTML to
        $container = $(this).parent().parent().parent().parent();

        // Get the HTML via ajax and append it to the containing div
        $.get('ajax/add-series/' + study_number + '/' + series_number, function(data){
            $container.append(data);
        });
     });
}

这是通过 AJAX 返回到调用函数的(简化的)HTML 结构(大写字母表示此文本是一个变量):

<div class="series" data-study-number="STUDY_NUMBER" data-series-number="SERIES_NUMBER">        
    <h4>series SERIES_NUMBER</h4>

    <div class="row">
        <div id="RANDOM_ID" class="small-12 columns large-centered uploader">&nbsp;</div>
    </div>                          
</div>

这工作正常并按预期显示在页面上。

我需要做的是从第一个函数(本问题开头的“点击”函数)中获取 id=RANDOM_ID 的 div。为了进行测试，我尝试使用以下选择器获取所有 .series div:

$series_divs = $('.study[data-study-number="' + STUDY_NUMBER + '"]').find('.content').find('.series');

这似乎只返回 .append() 调用之前存在的 .series div。它不会返回我刚刚附加的那个。我在这里做错了什么吗？

Answer 1

尝试这样的事情:

$(document).on("click", "a.add-another-series", function(e) {
    var $container = $(this).parent().parent().parent().parent();

    e.preventDefault();

    $.get('ajax/add-series/' + study_number + '/' + series_number)
    .then(function(data){
        var $data = $(data),
            id = $data.find(".row div").attr("id");

        $container.append($data);

        // Now something with id. Maybe call a function with it?
    });
});

注释

• 函数 add_series() 的用途是什么？包含事件处理程序的函数没有太多用处，因此我将其删除。
• 您忘记var您的变量。
• 尝试使用 .closest()，而不是 .parent().parent().parent().parent()。
• 您无需链接 .find() 调用。 .find('.content').find('.series') 相当于 find('.content .series')。
• study_number 和 series_number 来自哪里？