The selected jquery script is failing to function as intended

I'm currently implementing jQuery chosen in a select element to enhance user experience, however I'm facing an issue when attempting to copy the chosen div to another div using 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" />

The copying to another container is successful but unfortunately, the chosen elements do not load when focused on.

javascriptjqueryhtmlcssjquery-chosen

Answer №1

Remove the plugin when duplicating elements and then reinitialize them after adding them again:

Here is a suggestion to achieve this:

$(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" />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: An unexpected token < was caught in the TypeScript Express code

Using TypeScript to compile and run an Express server that simply serves an HTML file. However, encountering an error in the response under the network tab in Chrome for app.js: Uncaught SyntaxError: Unexpected token '<' Below is the server c ...

htmlnode.jstypescriptexpress

arrange a div inside another div

I'm struggling to grasp the concept of how divs function in HTML. Below is a snippet of my HTML code: <div id="user_p"> <img src="img/pp/djbaptou.jpg"> <div class="followings"> djbaptou </br> Baptiste Arnaud </br> ...

htmlcss

Issue with Bootstrap 4 navbar z-index not functioning as expected

Hello, I am struggling to place my navbar on top of an image using bootstrap 4. I have set the CSS properties for both elements, but it doesn't seem to be working. Here is the code I am using: <header> <nav class="navbar navbar-toggl ...

csstwitter-bootstrapnavbaroverlapbootstrap-4

Sending Dual Parameters to PHP File Using AJAX

Currently, I am facing an issue where I can successfully pass one value to a Bootstrap modal via AJAX, but my code stops working when I try to pass a second value. JavaScript function claimOrder(str, stre){ if (str=="") { document.getElementById("txtH"). ...

javascriptphpajax

What is the best way to collect and store data from various sources in an HTML interface to a Google Spreadsheet?

Currently, I have a spreadsheet with a button that is supposed to link to a function in my Google Apps Script called openInputDialog. The goal is for this button to open an HTML UI where users can input text into five fields. This input should then be adde ...

javascripthtmlgoogle-apps-scriptgoogle-sheets

There appears to be a malfunction in the socket rooms, as they are not operating

I have set up a code where sockets are being sent to the wrong person, and I am unable to figure out why. Whenever I update one user's status, it also updates the other user's status. Snippet of Code io.on('connection', function(socke ...

javascriptnode.jssocket.io

Ways to identify when an HTMLElement's size changes due to a percentage-based width setting

Currently, I am in the process of developing an Angular Component and have implemented the following CSS code: :host { display: block; width: 100%; } The main objective here is to ensure that the component remains as responsive as possible. However, ...

javascriptangularangular-components

Interrupting one process and initiating a new one

Trying to create a simple animation using Velocity.js. This animation will transition between two looping states upon clicking an svg. The first state involves horizontal scaling from scaleX(1) to scaleX(2.5) and back to scaleX(1), while maintaining scaleY ...

javascriptjqueryvelocity.js

Apollo Client's useQuery function is causing unnecessary refetches when using Next.js' router.push method

Currently, I'm facing an issue where a query within a useQuery Apollo Client hook is being re-run unnecessarily every time Next.js's router.push function is triggered. The problem code snippet looks like this: const Parent = () => { useQuery ...

javascripttypescriptnext.jsgraphqlapollo

In Javascript, the DOM contains multiple <li> elements, each of which is associated with a form. These forms need to be submitted using AJAX for efficient

I have a list element (ul) that includes multiple list items (li), and each list item contains a form with an input type of file. How can I submit each form on the change event of the file selection? Below is the HTML code snippet: <ul> ...

javascriptjqueryhtmlajax

Issue with footer not properly aligning on the page's bottom

In my current project, I am utilizing both angularjs and node js for development. Within my index.html, the views are being called in the following manner: <div ng-include="'views/header/header.view.html'"></div> <div ng-view styl ...

htmlcssangularjsnode.jsng-view

Difficulty in getting callbacks triggered for basic conversation with Botkit 4 and SlackAdapter

Struggling to get conversation callbacks firing correctly. Has anyone successfully implemented botkit 4 with Slack and can share a working sample? I've set up the necessary adapters and middleware, but my callbacks just won't trigger. I followed ...

javascriptexpressslackbotkit

Can you tell me the method of checking the number of members in a voice channel?

Is there a method to determine the number of members in a voice channel or check if it's empty using discord.js (V. 13.8.1)? I attempted the following code: async function countMembers(voiceState){ let users = await voiceState.channel.members.siz ...

javascriptnode.jsdiscord.js

Utilize a date state variable in JSX Text based on a specific condition

My goal is to create a feature that allows users to pick a date using DateTimePickerModal. I want to display a clickable message that says "Select date" before any date is chosen, and then replace it with the selected date. While I am not certain if there ...

javascriptreactjsreact-nativereact-hooksdatetimepicker

I am unable to produce sound by clicking on the drum machine

My goal is to develop a basic react drum machine project that I discovered on freecodecamp. The objective is to display 9 drumpads and trigger sound upon clicking. Update: I have successfully rendered all the keys but I am facing issues with the function ...

javascriptreactjs

Get the value of a CSS property in Python by parsing the rendered HTML

Currently, I am using Selenium and PhantomJS in conjunction with Python for the purpose of crawling rendered web pages. While it is a straightforward process to identify the presence of specific words within the HTML content (e.g. if "example" in html...), ...

pythonhtmlcssseleniumphantomjs

Currently, I am developing a Vue.js chat application. I am facing a challenge when it comes to sending the entire input div along with the keyboard popping up on Android devices. How can I achieve this

I'm in the process of developing a chat application using vuejs that will be accessed through a webview on Android. I currently have an input-bx element for sending messages, but I need to find a way to ensure it remains visible when the Android keybo ...

javascriptvue.jsvuejs2chat

What could be causing multiple executions of an Ajax post request?

My code snippet: $(document).ready(function(){ $("#mainbutton").click(function(){ $("#ajaxform").submit(function(e){ var info = $(this).serialize(); $.ajax( { ...

jqueryajax

Populate a table cell with data using a jQuery AJAX request

I am attempting to implement an ajax call for each of a series of 's and update the inner html of the td with processed data from the ajax call. Since I am restricted to using an ecommerce cms system, my ajax call is generating a complete page with t ...

jqueryajaxinnerhtml

Exploring the World of Html

I'm struggling with an HTML problem related to a web programming class I'm taking. The assignment involves creating a video game using HTML and JavaScript, where an image moves randomly on the screen and the player must click on it as many times ...

javascripthtmlcss