Question

我追加（或重复其他字样）<form>包括下拉列表 - 我的所有下拉列表都使用Chosen jQuery plugin。

问题：附加表单的下拉列表无效！

如何在附加后使其正常工作？

显然问题是jQuery脚本没有附加到新的/附加的下拉列表，因为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，然后才能选择它。

试试这个：

//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%'
     });
});

小提琴： 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插件无法正常工作 - 它是附加的

2 个答案: