2

我知道这应该是一件容易的事情......我想交换 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应该在divnamed中To。

我该如何解决？

4

3 回答 3

4

使用事件委托将事件绑定到每个 div 内的元素。这样，即使您更改了div的 HTML，事件侦听器也将起作用。

例如：

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

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

也是switchJavaScript 中的一个保留词，你不应该将你命名为 function switch。

于 2013-01-26T19:17:47.917 回答
0

一方面，你的课程最后"不见了

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

或者

$('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 );
});
于 2013-01-26T19:23:30.700 回答
0

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

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

    to.append(fromContents);
    from.append(toContents);
});
于 2013-01-26T21:07:17.857 回答