jquery.each не распознает динамически генерируемую структуру DOM?

Question

Я использую AJAX-вызов для получения данных с PHP-сервера.возвращаемое значение представляет собой набор тегов HTML <div>, содержащий <button>.при нажатии кнопки родительский div заменяется новым, который имеет другой идентификатор.

проблема в том, что после замены <div> с помощью вызова ajax jquery, похоже, распознает только старый набор тегов HTML.

все, что я нашел в интернете до сих порэто как привязать события к динамически создаваемым элементам.

, пожалуйста, помогите.

моя функция ajax выглядит так:

function deal_cards(n, targetSelector, action) {
    var myData = {
        'n': n, // number of cards to get
        'action': action, // type of action
    };

    $.ajax({
        type: 'get',
        url: '/test/get_cards',
        data: myData,
        dataType: 'json',
        success: function(res) {
            if (action == 'append') { // adds cards into selector
                $(targetSelector).append(res.view);
            }

            if (action == 'replace') { // replaces a card
                var newEl = $(res.view);
                console.log('newEl', newEl.attr('id'));
                $(targetSelector).fadeOut('normal', function() {
                    $(targetSelector).replaceWith(newEl);
                    $(targetSelector).fadeIn();
                });
            }

            // shows the IDs of .mycard
            // when called after page load, shows ID 0,1,2,3,4,5
            // after clicking .btn inside div.mycard#3 it still shows ID 0,1,2,3,4,5 instead of 0,1,2,101,4,5
            $('body').find('.mycard').each(function() {
                console.log($(this).attr('id'));
            });
        },
        error: function(err) {
            console.log(err.responseText);
        }
    });
}

это часть php для ajaxзвоните

// php
function get_cards()
{
    $result = array(
        'view' => [],
    );

    $n = $this->input->get('n');
    $action = $this->input->get('action');

    $x = 0;
    $view = '';
    if ($action == 'append')
    {
        for($i=0; $i<$n; $i++)
        {
            $x = $i;

            $view .= '<div class="col-md-12 mycard" id="'.$x.'" style="background-color:blue"><button class="btn">click</button></div>';
        }
    }
    else if ($action == 'replace')
    {
        $x = $n+100;

        $view .= '<div class="col-md-12 mycard" id="'.$x.'" style="background-color:blue"><button class="btn">click</button></div>';
    }

    $result['view'] = $view;
    echo json_encode($result);
}

и это HTML

// html
<div id="container"></div>

<script>
$(function() {
    // deals the cards right after page load
    // shows ID 0,1,2,3,4,5
    deal_cards(6, '#container', 'append');

    $('body').on('click', '.btn', function() {
        console.log('clicked card #'+$(this).closest('.mycard').attr('id')); // clicked card #3

        deal_cards(1, '#'+$(this).closest('.mycard').attr('id'), 'replace'); // replace the parent div.mycard of the button with a new one
    });
});
</script>

Answer 1

fadeout - это асинхронная операция.

Вам необходимо найти .mycard в обратном вызове fadeout.

$(targetSelector).fadeOut('normal', function() {
   $(targetSelector).replaceWith(newEl);
   $(targetSelector).fadeIn();
   findCards();
});

function findCards(){
   $('body').find('.mycard').each(function() {
       console.log($(this).attr('id'));
    });
}