Question

我正在使用AJAX调用从PHP服务器获取数据。返回值是一组<div>包含<button>的HTML标记。单击该按钮时，父div将替换为具有不同ID的新div。

问题是：通过ajax调用替换<div>后，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);
        }
    });
}

这是ajax调用的php部分

// 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

淡出是异步操作。

您需要在渐变回调中找到.mycard。

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

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

jquery.each不能识别动态生成的DOM结构？

1 个答案: