Как добавить html с помощью ajax jQuery?

Question

[V-ampre]

Всем привет, прошу подсказать решение следующей проблемы: на странице есть кнопка с классом class="loadBtn" при нажатии на которую через ajax добавляются данные. Вьюха отдает данные следующим образом

return render(request, 'results.html', {'data': data})

код шаблона results:

<table>
    <thead>
        <tr>
            <th>Наименование</th><th>Описание</th><th>Цена</th>
        </tr>
    </thead>
    <tbody>
        
        {% for product in data.products %}
            <tr>
                <th>{{ product.product_name }}</th>
                <th>{{ product.product_descript }}</th>
                <th>{{ product.product_price }}</th>
            </tr>
        {% endfor %}
            
    </tbody>
</table>
<form action="" method="get">
    <input type="hidden" name="start_url" value="{{ data.next_url }}">
    <input type="submit" value="Загрузить следующую страницу" class='loadBtn'>
</form>

то есть вместе данными добавляется кнопка с таким же классом, при нажатии на которую запрашивается следующая порция данных.
Проблема в следующем: сейчас пришедший ответ добавляется на страницу с помощью

document.getElementById(result_form).innerHTML = response;

В результате получается что, как я понял, добавляется просто текст и кнопка не появляется в DOM, соответственно при нажатии на нее не срабатывает отправка данных ajax.
Как можно добавить html чтобы при этом обновился DOM, пробовал вместо innerHTML append - тогда почему-то не распознаются теги, добавляется текст как он есть.

Answer 1

[Ilya Loginov]

Просто замените:

document.getElementById(result_form).innerHTML = response;

На:
$('#'+result_form).html(response);

Comments

[V-ampre]

Тот же эффект, ajax не срабатывает

[Ilya Loginov]

А как вы подключаете событие для кнопки?
Если так:

$(".test").click(function(){
...
});

То работать не будет. Надо так:

$(document).on('click','.test',function(){
...
});

[V-ampre]

Ilya Loginov, ох уж этот javascript)) работает, благодарю!)