即使插入后也找不到分离的元素

Question

我有一个 id= 的元素search。我尝试从 a 中分离元素<td>并将其插入另一个<td>，但它只是第一次发生，然后给出undefined.$('body').on('click', '.select-area', function () {    var element = $('#search').detach();    $('tr[id_area="' + parseInt($(this).attr('area-id')) + '"]')        .find('td:eq(1)')        .html('<div id="search">' + element.html() + '</div>');});我怎样才能让后续点击也发生这种情况.select-area？非常感谢您的帮助

Answer 1

只需选择它并将其附加到新位置。元素将被移动，事件将保留。

$('body').on('click', 'td.select-area', function () {

    var element = $('#search');

    $(this)

        .closest("tr")

        .find('td:eq(1)')

        .append(element);

});

$("#test").on("input", function (e) {

  console.log(e.originalEvent.data);

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>

  <tr>

    <td class="select-area">1</td>

    <td><span id="search"><input id="test" /></span></td>

  </tr>

  <tr><td class="select-area">2</td><td></td></tr>

  <tr><td class="select-area">3</td><td></td></tr>

  <tr><td class="select-area">4</td><td></td></tr>

  <tr><td class="select-area">5</td><td></td></tr>

</table>

Answer 2

为了分享，我的问题的一个解决方案是将分离操作移到点击事件监听器之外。这似乎是合乎逻辑的，因为在我的情况下，此操作只需要执行一次。

// On document ready

var element = $('#search').detach();

$('body').on('click', '.select-area', function () {

    $('tr[id_area="' + parseInt($(this).attr('area-id')) + '"]')

        .find('td:eq(1)')

        .html('<div id="search">' + element.html() + '</div>');

});

但是 epascarello 提到的方法更简单，应该从头开始。它只是不适合我的具体情况。