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结构（CAPS表示此文本是变量）：

<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（此问题开头的'on click'一个）。为了测试，我尝试使用以下选择器获取所有.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?
    });
});

注释

function add_series()的目的是什么？在包含事件处理程序的函数中没有太多用处，所以我删除了它。
您忘了var您的变量。
尝试使用.parent().parent().parent().parent()。

.closest()

您无需将.find()来电链接起来。 .find('.content').find('.series')相当于find('.content .series')。
study_number和series_number来自何处？

为什么JQuery没有“找到”附加的div？

1 个答案: