jQuery 插件不工作 - 它已附加

Question

我附加（或换句话说复制）一个 <form> 其中包括下拉菜单 - 我所有的下拉菜单都使用 Chosen jQuery plugin.

问题： 附加表单的下拉列表不起作用！

附加后如何让它工作？

显然问题是 jQuery 脚本没有附加到 new/appended 下拉列表，因为 HTML 是 100% 相同但是如何做到这一点？

<form class="my-form">
   <div class="new-item row">
    <select name="transport-type[]">
        <option value=""><?php _e('Type', 'tt'); ?></option>
        <option value="coach"><?php _e('Coach', 'tt'); ?></option>
        <option value="diesel-train"><?php _e('Diesel Train', 'tt'); ?></option>
        <option value="electric-train"><?php _e('Electric Train', 'tt'); ?></option>
        <option value="trolley"><?php _e('Trolley', 'tt'); ?></option>
        <option value="tram"><?php _e('Tram', 'tt'); ?></option>
        <option value="city-bus"><?php _e('City Bus', 'tt'); ?></option>
        <option value="shuttle"><?php _e('Shuttle', 'tt'); ?></option>
    </select> 
  </div>
</form>

<div class="clearfix">
    <a class="add-new btn"><?php _e( 'Add New','tt' ); ?></a>
</div>  



<?php

//All JS is on different file & is included before HTML

//Fires up / "attaches" Chosen.js to select
jQuery('select').chosen({
    disable_search: false,
    disable_search_threshold: 10,
    width: '100%'
});

//Add new
jQuery(document).on('click', '.add-new', function() {
     newGroup = jQuery('.new-item').html();
     jQuery('.my-form').append('<div class="new-item row">'+newGroup+'</div>');
});

Answer 1

你需要抓住 .new-item 的 HTML 才能被 chosen 转化。

试试这个：

//Fires up / "attaches" Chosen.js to select
var newGroup = jQuery('.new-item:first').html();
jQuery('select').chosen({
    disable_search: false,
    disable_search_threshold: 10,
    width: '100%'
});

//Add new
var group_id = 0;
jQuery(document).on('click', '.add-new', function() {
     group_id++;
     jQuery('.my-form').append('<div class="new-item row" id="group_' + group_id + '" >'+newGroup+'</div>');
     jQuery('#group_' + group_id + ' select').chosen({
         disable_search: false,
         disable_search_threshold: 10,
         width: '100%'
     });
});

Fiddle: http://jsfiddle.net/trex005/qfvhyg4y/

Answer 2

将您的脚本移至 html 代码的末尾或将您的脚本放入 document.ready

$(document).ready(function() {
         $('select').chosen({
               disable_search: false,
               disable_search_threshold: 10,
               width: '100%'
         });
});

jQuery 插件不工作 - 它已附加

jQuery plugin not working - it's appended

jquery

append

jquery-chosen