令牌输入 - 从一个 div 移动到另一个答案

【问题标题】：Token Input - Moving from one div to other令牌输入 - 从一个 div 移动到另一个
【发布时间】：2014-04-04 16:30:02
【问题描述】：

根据要求，我想将令牌输入从一个 div 移动到另一个 div。

我能够将令牌输入数据从一个 div 移动到另一个，但令牌输入功能在其他 div 中不起作用。

下面是代码

<html>
<head>
    <script type="text/javascript" src="jquery-1.11.0.min.js" ></script>
    <script type="text/javascript" src="jquery.tokeninput.js" ></script>
    <link type="text/css" href="token-input.css"  rel="stylesheet"></link>
    <script type="text/javascript">
        $(document).ready(function() {
                initialize();
        });
        function initialize() {
            $("#demo-input").tokenInput([
                {id: 7, name: "Ruby"},
                {id: 11, name: "Python"},
                {id: 13, name: "JavaScript"},
                {id: 17, name: "ActionScript"},
                {id: 19, name: "Scheme"},
                {id: 23, name: "Lisp"},
                {id: 29, name: "C#"},
                {id: 31, name: "Fortran"},
                {id: 37, name: "Visual Basic"},
                {id: 41, name: "C"},
                {id: 43, name: "C++"},
                {id: 47, name: "Java"}
            ]);
        }
        function change() {
            if( $(".div2").html().trim().length == 0 ) {
                $(".div2").html( $(".div1").html() );
                $(".div1").html('');
            } else {
                $(".div1").html( $(".div2").html() );
                $(".div2").html('');
            }
        }
    </script>
</head>
<body>
    <div class="div1" style="border:1px solid red">
        <input type="text" id="demo-input" name="blah" />
    </div>

    <input type="button" onclick="change()"  value="ClicktoMove" />
    <div class="div2"  style="border:1px solid yellow">

    </div>
</body>

谁能帮忙解决这个问题...

【问题讨论】：

您需要维护令牌输入的状态吗？如果没有，我的图像重新初始化将是最好的举措。
@Chris 重新初始化将不起作用，因为插件复制了输入

标签： jquery jquery-tokeninput

【解决方案1】：

当您使用 .html() 时，孩子将失去绑定到它的事件。

如果你只是将一个元素从一个地方复制到另一个地方，你可以使用.clone(true)

如果您要移动多个元素，例如您的情况，则需要使用 element.contents()

更多详情，请阅读this。

这里是Demo。

对代码的更改：

function change() {
    if($.trim($(".div2").html()).length === 0 ) {
        $(".div2").html($(".div1").contents());
        $(".div1").html('');
    }
    else
    {
        $(".div1").html( $(".div2").contents() );
        $(".div2").html('');
    }
}

【讨论】：