Question

我正在使用下面的Ajax调用，以便用一些HTML元素填充占位符容器（“containerSub”），例如包含如下标准文本：

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

现在我想在Ajax调用的成功函数中引用类“elastic”的所有元素（如下例所示），但这不起作用，因为我猜想元素会被添加动态地到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();
    });
}

Answer 2

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

这可能就是你要找的东西。

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

2 个答案: