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

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 () {&nbsp; &nbsp; var element = $('#search');&nbsp; &nbsp; $(this)&nbsp; &nbsp; &nbsp; &nbsp; .closest("tr")&nbsp; &nbsp; &nbsp; &nbsp; .find('td:eq(1)')&nbsp; &nbsp; &nbsp; &nbsp; .append(element);});$("#test").on("input", function (e) {&nbsp; console.log(e.originalEvent.data);})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table>&nbsp; <tr>&nbsp; &nbsp; <td class="select-area">1</td>&nbsp; &nbsp; <td><span id="search"><input id="test" /></span></td>&nbsp; </tr>&nbsp; <tr><td class="select-area">2</td><td></td></tr>&nbsp; <tr><td class="select-area">3</td><td></td></tr>&nbsp; <tr><td class="select-area">4</td><td></td></tr>&nbsp; <tr><td class="select-area">5</td><td></td></tr></table>

Answer 2

为了分享，我的问题的一个解决方案是将分离操作移到点击事件监听器之外。这似乎是合乎逻辑的，因为在我的情况下，此操作只需要执行一次。// On document readyvar element = $('#search').detach();$('body').on('click', '.select-area', function () {&nbsp; &nbsp; $('tr[id_area="' + parseInt($(this).attr('area-id')) + '"]')&nbsp; &nbsp; &nbsp; &nbsp; .find('td:eq(1)')&nbsp; &nbsp; &nbsp; &nbsp; .html('<div id="search">' + element.html() + '</div>');});但是 epascarello 提到的方法更简单，应该从头开始。它只是不适合我的具体情况。