jquery 将 div 内容与插件的操作交换

Question

我知道这应该是一件容易的事情...我想交换 2 个 div 的内容，并将剩余操作绑定(bind)到每个元素。现在我有这个:

<div class="From">
    //something here, doesnt matter
</div>

<div class="To">
    //something here, doesnt matter
</div>
....
function switchElems() {
    var from = $( ".From" );
    var to = $( ".To" );
    var fromHtml = from.html();
    var toHtml = to.html();
    from.html( toHtml );
    to.html( fromHtml );
}

但它仅切换内容，解除与内部元素相关的每个操作的绑定(bind)。我所说的 Action 是指包含在内容中的整个逻辑，并附加了额外的插件。例如，在带有 from 类的 div 中，有一个 input ，其中绑定(bind)了 jQuery geocomplete 插件。切换元素后，我希望该输入仍然具有地理完成功能，但现在 input 应该位于名为 To 的 div 中。

如何修复它？

Answer 1

使用Event delegation将事件绑定(bind)到每个 div 内的元素。这样，即使您更改 div 的 HTML，事件监听器也能正常工作。

例如:

$('#from').on('click', '.my-element', handler);  

在这种情况下，如果您更新 #from 的内容并且新的 my-elements 显示在其中，它们将具有处理程序

此外，switch 是 JavaScript 中的保留词，您不应该将函数命名为 switch。