jQuery/Ajax:如何引用动态添加的元素

Question

我正在使用下面的Ajax调用,以便containerSub用一些HTML元素填充占位符容器(" "),例如包含如下所示的标准textareas:

<textarea rows="1" class="form-control elastic">Some text</textarea>

现在我想elastic在Ajax调用的成功函数中引用所有带有类" " 的元素(如下例所示)但这不起作用,因为我猜这些元素会动态地添加到DOM中.

有人能告诉我如何在不重新加载页面的情况下实现这一目标吗？

$('#categories').on('change', function() {
    var category = $(this).val();

    $.ajax({
        url: 'ajax.php?node=fetchQuestions',
        cache: false,
        data: {
            category: category
        },
        error:function(err) {
            alert(err.statusText);
        },
        success:function(html) {
            $('#containerSub').html(html);
            $('.elastic').elastic();
        }
    });
});

Ajax调用之前的容器:

<div id="containerSub"></div>

之后的容器(例子):

<div id="containerSub">
    <textarea rows="1" class="form-control elastic">Some text</textarea>
</div>

蒂姆,非常感谢你提供的任何帮助.

Answer 1

添加延迟回调,以便在注入HTML 后,您可以应用.elastic():

success:function(html) {
    $('#containerSub').html(html).promise().done(function(){
        $(this).find('.elastic').elastic();
    });
}