Token Input - Moving from one div to other

StackOverflow https://stackoverflow.com/questions/22868191

  •  27-06-2023
  •  | 
  •  

题

As per the requirement i want to move the token input from one div to another div.

I am able to move the token input data from one div to other but the token input feature is not working in other div.

Below is the code

<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>

Can any one help on this...

有帮助吗？

解决方案

When you use .html(), the children will lose the events binded to it.

If you are copying just one element from one place to other than you can use .clone(true)

If you are moving multiple elements, like in your case, than you need to use element.contents()

For more details, read this.

Here is the Demo.

Changes to your code:

function change() {
    if($.trim($(".div2").html()).length === 0 ) {
        $(".div2").html($(".div1").contents());
        $(".div1").html('');
    }
    else
    {
        $(".div1").html( $(".div2").contents() );
        $(".div2").html('');
    }
}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top