tr вставить после запроса ajax

Я новичок в jQuery и только что создал следующее: таблица с текстовым полем над ней, таблица показывает совпадения в базе данных:

<script>
$('#searchRecept > #searchReceptAjax').keyup(function(){//Werkt dit?

    var postRecept = $.post("../ajaxhandler.php?action=searchRecept", $('#searchRecept').serialize());
    postRecept.done(function( data ) {
        var response = $("<div>" + data + "</div>").find('tbody');
        $('#recepten > tbody').replaceWith( response );
    });
});
</script>

Это прекрасно работает. Перед этим я создал ссылку (по одной в каждой строке tbody), чтобы вставить новую строку после этой строки:

<script>
    $('.addingredient').click(function(e){
    $('<tr><td colspan="5">test</td></tr>').insertAfter($(this).closest('tr'));                    
    });
</script>

Тело выглядит так:

<tbody>
    <tr>
        <td>Something...</td>
        <td>Something else.</td>
        <td>Probably some text here.</td>
        <td>...</td>
        <td>???</td>
        <td><a href="#" class="addingredient">aap</a></td>
    </tr>
</tbody>

Я использовал тот же php include в ajaxhandler.php (для создания ответа), что и в начальном запросе страницы - конечно, с другим содержимым. Однако после того, как tbody изменен первой частью javascript, добавление строки больше не работает. Даже если тело, полученное из ответа, имеет те же данные, что и в исходном запросе (когда строка поиска пуста).

Почему это не работает? Какие-нибудь мысли?

Наилучшие пожелания,

Нильс


jquery closest tr insertafter
person Niellles    schedule 19.03.2014    source источник
comment
Используйте делегирование событий. learn.jquery.com/events/event-delegation   -  person blgt    schedule 19.03.2014

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать делегирование событий, чтобы прикреплять события к динамически создаваемым элементы:

$('body').on('click','.addingredient', function(e){
    $('<tr><td colspan="5">test</td></tr>').insertAfter($(this).closest('tr'));                    
});
person Felix    schedule 19.03.2014
comment
Спасибо, что сработало. Просто для моего понимания: так, как я это сделал, я создал событие (щелчок) для всех элементов с «.addingredient», которые существовали в то время... Вновь созданные элементы не получили это действие, но теперь, потому что я смотрю для элементов внутри ‹тела› это работает. Правильный? - person Niellles; 19.03.2014
comment
Да, ты прав. Вы также можете узнать больше о делегировании событий по ссылке, которую я предоставил в ответе. - person Felix; 20.03.2014