dklight
@dklight
php кодер - level 2.5

Как повесить обработчик на элемент, вставленный в dom с помощью append?

собственно сам обработчик:

$('#question_type_1 .add_answer').on('click', function (e) {
    
    let trs = $('#question_type_1 [class^=answer_number_]:last-child').attr('class');
    trs = trs.replace('answer_number_','');
    //console.log(trs);
    trs *= 1; trs += 1;

    $('#question_type_1 tbody').append(
        '<tr class="answer_number_' + trs + '">'+
            '<td>' + trs +'</td>'+
            '<td>'+
            '    <input class="form-control" type="text" name="answer' + trs + '">'+
            '</td>'+
            '<td>'+
            '    <span class="badge badge-secondary">True</span>'+
            '    <span class="badge badge-danger active">False</span>'+
            '    <span class="badge badge-success add_answer pl-2 pr-2">+</span>'+
            '    <span class="badge badge-danger del_answer pl-2 pr-2">-</span>'+
            '</td>'+
        '</tr>'
    );

    return false;
});

и сам html
<tbody>
    <tr class="answer_number_1">
        <td>1</td>
        <td>
            <input class="form-control" type="text" name="answer1">
        </td>
        <td>
            <span class="badge badge-secondary">True</span>
            <span class="badge badge-danger active">False</span>
            <span class="badge badge-success add_answer pl-2 pr-2">+</span>
            <span class="badge badge-danger del_answer pl-2 pr-2">-</span>
        </td>
    </tr>

</tbody>


что нужно сделать, в обработчике или в html, чтобы вновь добавленный элемент tr, реагировал на существующий обработчик?
  • Вопрос задан
  • 67 просмотров
Решения вопроса 1
dklight
@dklight Автор вопроса
php кодер - level 2.5
как обычно, решение найдено почти сразу после опубликования вопроса
$(document).on('click', '.add_answer', function (e) {
    
    let trs = $('#question_type_1 [class^=answer_number_]:last-child').attr('class');
    trs = trs.replace('answer_number_','');
    //console.log(trs);
    trs *= 1; trs += 1;

    $('#question_type_1 tbody').append(
        '<tr class="answer_number_' + trs + '">'+
        '<td>' + trs +'</td>'+
        '<td>'+
        '    <input class="form-control" type="text" name="answer' + trs + '">'+
        '</td>'+
        '<td>'+
        '    <span class="badge badge-secondary">True</span>'+
        '    <span class="badge badge-danger active">False</span>'+
        '    <span class="badge badge-success add_answer pl-2 pr-2">+</span>'+
        '    <span class="badge badge-danger del_answer pl-2 pr-2">-</span>'+
        '</td>'+
        '</tr>'
    );

    return false;
});
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы