Question

我知道这应该是一件容易的事情...我想交换2个div的内容，并保留绑定到每个元素的动作。现在我有了这个：

<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 );
}

但它只会切换内容，解除与内部元素相关的每个动作的绑定。通过操作，我的意思是整个逻辑包含在内部内容中，附加插件。例如，在具有类from的div内部，input将jQuery geocomplete插件绑定到其中。在切换elems之后，我希望该输入仍具有地理填充功能，但现在input应该在名为div的{{1}}中。

我该如何解决？

Answer 1

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

例如：

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

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

同样switch是JavaScript中的一个重复单词，您不应该将其命名为switch。

Answer 2

首先，您的课程最后缺少"

HTML：

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

使用Javascript：

$('class_or_id').change(function(){
     var from = $( ".From" );
     var to = $( ".To" );
     var fromHtml = from.html();
     var toHtml = to.html();
     from.html( toHtml );
     to.html( fromHtml );
});

OR

$('class_or_id').click(function(){
     var from = $( ".From" );
     var to = $( ".To" );
     var fromHtml = from.html();
     var toHtml = to.html();
     from.html( toHtml );
     to.html( fromHtml );
});

Answer 3

如果要保留元素，请不要使用html()，它将所有内容转换为字符串，而是移动原生元素：

$('class_or_id').click(function(){
    var from = $(".From"),
        to = $(".To"),
        fromContents = from.contents(),
        toContents = to.contents();

    to.append(fromContents);
    from.append(toContents);
});

jquery使用插件中的操作交换div内容

3 个答案: