选择的 jquery 脚本不工作

Question

我正在使用在 select 元素中选择的 jQuery 以使其更加用户友好，但是当我将选择的 div 复制到另一个 [=23] 时它不起作用=] 使用 jquery

$(document).ready(function() {
  $(".chosen").chosen({});

  $("#movechosen").click(function() {
    var chosenHtml = $(".mycontainer").html();
    $(".movecontainer").append(chosenHtml);
  });
});

   <div class="mycontainer" style="background:#ddd">
     Container 1: <select class="chosen" multiple>
       <option>Select option</option>
       <option>USA</option>
       <option>Germany</option>
       <option>India</option>
       <option>China</option>
       <option>Canada</option>
       <option>Australia</option>
     </select>
   </div>
  <div class="movecontainer" style="background:#e1e1e1">
     Container 2 : 
  </div>
<input type="button" value="copy to container 2" id="movechosen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.1/chosen.jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.1/chosen.css" />

它正在复制到另一个容器，但是当您专注于所选内容时，它不会加载其中可用的元素。

Answer 1

克隆元素时销毁插件，然后在附加后重新初始化它们：

尝试以下操作：

$(document).ready(function() {
  $(".chosen").chosen();

  $("#movechosen").click(function() {
     $(".chosen").chosen("destroy");
    var chosenHtml = $(".mycontainer").html();
    $(".movecontainer").append(chosenHtml);
    $(".chosen").chosen();

  });
});

<div class="mycontainer" style="background:#ddd">
     Container 1: <select class="chosen" multiple>
       <option>Select option</option>
       <option>USA</option>
       <option>Germany</option>
       <option>India</option>
       <option>China</option>
       <option>Canada</option>
       <option>Australia</option>
     </select>
   </div>
  <div class="movecontainer" style="background:#e1e1e1">
     Container 2 : 
  </div>
<input type="button" value="copy to container 2" id="movechosen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.1/chosen.jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.1/chosen.css" />

选择的 jquery 脚本不工作

Chosen jquery script is not working

html

javascript

css

jquery

jquery-chosen