本文介绍了选择的插件选项不会传递给克隆行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
设置
我使用Chosen插件（）
和使用relCopy脚本进行克隆
问题
I可以成功克隆行，但max_selected_options等选项不会传递给克隆的行。
请告知我做错了什么？
小提琴档案：
HTML代码
< label>选择选项< / label>
< option value =>< / option>
< optgroup label =NFC EAST>
< option>达拉斯牛仔< / option>
< option>纽约巨人< / option>
< option> Philadelphia Eagles< / option>
< option> Washington Redskins< / option>
< / optgroup>
< optgroup label =NFC NORTH>
< option> Chicago Bears< / option>
< option> Detroit Lions< / option>
<选项>绿湾包装工< /选项>
<选项>明尼苏达维京人< / option>
< / optgroup>
< / select>
< p>< a href =＃class =copy =。addMoreFiles>添加更多< / a>< / p>
JS文件
/ **
* jQuery-PluginrelCopy
*
* @version：1.1.0，25.02.2010
*
* @作者：Andres Vidal
* [email protected]
* http://www.andresvidal.com
*
*说明：致电$（选择器）.relCopy（选项）在元素上使用jQuery类型选择器
*在属性rel标签中定义。这定义了要复制的DOM元素。
* @example：$（'a.copy'）。relCopy（{limit：5}）; //< a href =example.comclass =copy =。phone>复制手机< / a>
*
* @param：string excludeSelector - 用于排除元素及其子元素的jQuery选择器
* @param：整数限制 - 允许的副本数。默认值：0无限制
* @param：string append - 在每个副本结尾附加HTML。默认值：删除链接
* @param：字符串copyClass - 要附加到每个副本的类
* @param：布尔值clearInputs - 用于清除每个副本的选项文本输入字段或textarea
*
$ / b
$ b（function（$）{
$ .fn.relCopy = function（options）{
var settings = jQuery.extend（{ b $ b excludeSelector：.exclude，
emptySelector：.empty，
copyClass：copy，
append：''，
clearInputs：true，
limit：0 // 0 = unlimited
}，options）;
settings.limit = parseInt（settings.limit）;
//每个循环元素
this.each（function（）{
//设置点击动作
$（this）.click（function（）{
var rel = $（ this）.attr（'rel'）; // rel in jquery selector format
var counter = $（rel）.length;
// stop lim它
if（settings.limit！= 0&& counter> = settings.limit）{
return false;
};
var master = $（rel +：first）;
var parent = $（master）.parent（）;
var clone = $（master）.clone（true）.addClass（settings.copyClass + counter）.append（settings.append）;
//使用excludeSelector删除元素
if（settings.excludeSelector）{
$（clone）.find（settings.excludeSelector）.remove（）;
};
// EmptySelector为空元素
if（settings.emptySelector）{
$（clone）.find（settings.emptySelector）.empty（）;
};
$ b $ //增加克隆ID
if（$（clone）.attr（'id'））{
var newid = $（clone）.attr（'id'） +（计数器+1）;
$（克隆）.attr（'id'，newid）;
};
//增加克隆儿童ID
$（clone）.find（'[id]'）。each（function（）{
var newid = $（this）。 attr（'id'）+（counter +1）;
$（this）.attr（'id'，newid）;
}）;
//清除输入/ Textarea
if（settings.clearInputs）{
$（clone）.find（'：input'）。each（function（）{
var type = $（this）.attr（'type'）;
switch（type）
{
casebutton：
break;
case 重置：
break;
casesubmit：
break;
case复选框：
$（this）.attr（'checked'，' '）;
break;
default：
$（this）.val（）;
}
if（$（this）.hasClass（'chosen选择'））{
$（this）.ne XT（选择容器。）除去（）;
$（this）.css（{display：inline-block}）。removeClass（selected-done）;
var that = $（this）;
$ b $ setTimeout（function（）{that.removeData（'selected'）。chosen（）;}，0）;
}
}）;
};
$ b $（父）.find（rel +'：last'）。after（clone）;
返回false;
}）; //结束点击操作
}）; //结束每个循环
返回this; //返回jQuery
};
}）（jQuery）;
$ b $（function（）{
var removeLink ='< a class =removehref =＃onclick =$（this）.parent（） .slideUp（function（）{$（this）.remove（）}）; return false> remove< / a>';
$（'a.copy'）。relCopy（{append：removeLink} ）;
}）;
$ b $（document）.ready（function（）{
$（。selected-select-deselect）。selected（{allow_single_deselect：true}）;
$（ .chosen-select）。selected（{max_selected_options：2}）;
$（。selected-select）。bind（selected：maxselected，function（）{alert（Maximum limit reached ）;}）;
$（。selected-select）。trigger（'chosen：activate'）;
}）;
解决方案
我认为事件并未分配给新克隆的元素，即使在clone方法中指定了true属性。
无论如何，heres需要一个快速的解决方法来确保始终附加事件。
新的小提琴：
HTML
< ; div class =more-files-template hidden>
< label>选择选项< / label>
< option value =>< / option>
< optgroup label =NFC EAST>
< option>达拉斯牛仔< / option>
< option>纽约巨人< / option>
< option> Philadelphia Eagles< / option>
< option> Washington Redskins< / option>
< / optgroup>
< optgroup label =NFC NORTH>
< option> Chicago Bears< / option>
< option> Detroit Lions< / option>
<选项>绿湾包装工< /选项>
<选项>明尼苏达维京人< / option>
< / optgroup>
< / select> < a class =removehref =＃>移除< / a>
< / div>
< form id =formaction =/method =post>
< div class =files>< / div>
< / form>
< p>< a href =＃class =copy-link>添加更多< / a>
< / p>
< p>< a href =＃class =form-submit-button>提交表单< / a>
< / p>
JS
$（main）;
function main（）{
var fieldNumber = 0;
var fieldNameAndID =Opt_;
var maxFieldsAllowed = 5;
addField（fieldNumber）; $（）。copy-link）。on（click，function（e）{
e.preventDefault（）;
addField（fieldNumber ）;
}）; （click，a，function（e）{
e.preventDefault（）;
fieldNumber = fieldNumber - 1;
$（this）
.parent（）
.slideUp（function（）{
$（this）.remove（）;
}）;
}）; $（）。form-submit-button）。on （$（＃form）。serialize（））;
}）;
函数addField（index）{
fieldNumber = index + 1;
if（fieldNumber> maxFieldsAllowed）{
fieldNumber = fieldNumber - 1;
alert（抱歉！无法添加超过+ maxFieldsAllowed +字段。）;
返回false;
}
var newFieldNameAndID = fieldNameAndID + fieldNumber;
var $ new = $（。more-files-template）
.clone（true）
.removeClass（more-files-template hidden）
.addClass（another-field）;
if（fieldNumber == 1）{
$ new.find（。remove）。remove（）;
}
$（。files）。append（$ new）;
$ b $ new.find（select）
.attr（{
name：newFieldNameAndID，
id：newFieldNameAndID
}）
.chosen（{
max_selected_options：2
}）
.bind（selected：maxselected，function（）{
alert（Maximum limit reached）;
}）;
}
};
CSS
.hidden {
display：none; / *隐藏模板* /
}
这不是完美的，但会让你在正确的方向：）
希望有所帮助。
Varinder
SETUPI'm using Chosen plugin (http://harvesthq.github.com/chosen/)and Cloning using relCopy script
PROBLEMI can clone rows successfully but options like "max_selected_options" are not passed to cloned rows.Please advise what am I doing wrong?
Fiddle file:http://jsfiddle.net/KjNb5/
HTML Code
<label>Select Options</label>
<select data-placeholder="You may select upto Two options" name="Opt_1" id="Opt_1" class="chosen-select" multiple tabindex="6" style="width: 280px; ">
<option value=""></option>
<optgroup label="NFC EAST">
<option>Dallas Cowboys</option>
<option>New York Giants</option>
<option>Philadelphia Eagles</option>
<option>Washington Redskins</option>
</optgroup>
<optgroup label="NFC NORTH">
<option>Chicago Bears</option>
<option>Detroit Lions</option>
<option>Green Bay Packers</option>
<option>Minnesota Vikings</option>
</optgroup>
</select>
<p><a href="#" class="copy" rel=".addMoreFiles">Add More</a></p>
JS Files
/**
* jQuery-Plugin "relCopy"
*
* @version: 1.1.0, 25.02.2010
*
* @author: Andres Vidal
* [email protected]
* http://www.andresvidal.com
*
* Instructions: Call $(selector).relCopy(options) on an element with a jQuery type selector
* defined in the attribute "rel" tag. This defines the DOM element to copy.
* @example: $('a.copy').relCopy({limit: 5}); // <a href="example.com" class="copy" rel=".phone">Copy Phone</a>
*
* @param: string excludeSelector - A jQuery selector used to exclude an element and its children
* @param: integer limit - The number of allowed copies. Default: 0 is unlimited
* @param: string append - HTML to attach at the end of each copy. Default: remove link
* @param: string copyClass - A class to attach to each copy
* @param: boolean clearInputs - Option to clear each copies text input fields or textarea
*
*/
(function($) {
$.fn.relCopy = function(options) {
var settings = jQuery.extend({
excludeSelector: ".exclude",
emptySelector: ".empty",
copyClass: "copy",
append: '',
clearInputs: true,
limit: 0 // 0 = unlimited
}, options);
settings.limit = parseInt(settings.limit);
// loop each element
this.each(function() {
// set click action
$(this).click(function(){
var rel = $(this).attr('rel'); // rel in jquery selector format
var counter = $(rel).length;
// stop limit
if (settings.limit != 0 && counter >= settings.limit){
return false;
};
var master = $(rel+":first");
var parent = $(master).parent();
var clone = $(master).clone(true).addClass(settings.copyClass+counter).append(settings.append);
//Remove Elements with excludeSelector
if (settings.excludeSelector){
$(clone).find(settings.excludeSelector).remove();
};
//Empty Elements with emptySelector
if (settings.emptySelector){
$(clone).find(settings.emptySelector).empty();
};
// Increment Clone IDs
if ( $(clone).attr('id') ){
var newid = $(clone).attr('id') + (counter +1);
$(clone).attr('id', newid);
};
// Increment Clone Children IDs
$(clone).find('[id]').each(function(){
var newid = $(this).attr('id') + (counter +1);
$(this).attr('id', newid);
});
//Clear Inputs/Textarea
if (settings.clearInputs){
$(clone).find(':input').each(function(){
var type = $(this).attr('type');
switch(type)
{
case "button":
break;
case "reset":
break;
case "submit":
break;
case "checkbox":
$(this).attr('checked', '');
break;
default:
$(this).val("");
}
if ($(this).hasClass('chosen-select')) {
$(this).next('.chosen-container').remove();
$(this).css({display: "inline-block"}).removeClass("chosen-done");
var that = $(this);
setTimeout(function(){ that.removeData('chosen').chosen();},0);
}
});
};
$(parent).find(rel+':last').after(clone);
return false;
}); // end click action
}); //end each loop
return this; // return to jQuery
};
})(jQuery);
$(function(){
var removeLink = ' <a class="remove" href="#" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false">remove</a>';
$('a.copy').relCopy({append: removeLink});
});
$(document).ready(function(){
$(".chosen-select-deselect").chosen({allow_single_deselect:true});
$(".chosen-select").chosen({max_selected_options: 2});
$(".chosen-select").bind("chosen:maxselected", function () { alert("Maximum limit reached"); });
$(".chosen-select").trigger('chosen:activate');
});
解决方案
I think events are not assigned to newly cloned elements, even though "true" attribute is specified in the clone method.
Anyway, heres a quick work-around to ensure events are always attached.
New Fiddle : http://jsfiddle.net/KjNb5/4/
Old Fiddle : http://jsfiddle.net/KjNb5/1/
HTML
<div class="more-files-template hidden">
<label>Select Options</label>
<select data-placeholder="You may select upto Two options" multiple tabindex="6" style="width: 280px; ">
<option value=""></option>
<optgroup label="NFC EAST">
<option>Dallas Cowboys</option>
<option>New York Giants</option>
<option>Philadelphia Eagles</option>
<option>Washington Redskins</option>
</optgroup>
<optgroup label="NFC NORTH">
<option>Chicago Bears</option>
<option>Detroit Lions</option>
<option>Green Bay Packers</option>
<option>Minnesota Vikings</option>
</optgroup>
</select> <a class="remove" href="#">remove</a>
</div>
<form id="form" action="/" method="post">
<div class="files"></div>
</form>
<p><a href="#" class="copy-link">Add More</a>
</p>
<p><a href="#" class="form-submit-button">Submit form</a>
</p>
JS
$( main );
function main() {
var fieldNumber = 0;
var fieldNameAndID = "Opt_";
var maxFieldsAllowed = 5;
addField(fieldNumber);
$(".copy-link").on("click", function (e) {
e.preventDefault();
addField(fieldNumber);
});
$(".files").on("click", "a", function (e) {
e.preventDefault();
fieldNumber = fieldNumber - 1;
$(this)
.parent()
.slideUp(function () {
$(this).remove();
});
});
$(".form-submit-button").on("click", function (e) {
e.preventDefault();
alert($("#form").serialize());
});
function addField(index) {
fieldNumber = index + 1;
if (fieldNumber > maxFieldsAllowed) {
fieldNumber = fieldNumber - 1;
alert("Sorry! cannot add more than " + maxFieldsAllowed + " fields.");
return false;
}
var newFieldNameAndID = fieldNameAndID + fieldNumber;
var $new = $(".more-files-template")
.clone(true)
.removeClass("more-files-template hidden")
.addClass("another-field");
if (fieldNumber == 1) {
$new.find(".remove").remove();
}
$(".files").append($new);
$new.find("select")
.attr({
name: newFieldNameAndID,
id: newFieldNameAndID
})
.chosen({
max_selected_options: 2
})
.bind("chosen:maxselected", function () {
alert("Maximum limit reached");
});
}
};
CSS
.hidden {
display:none; /* to hide template */
}
This isn't prefect but will put you in right direction :)
Hope that helps.
Varinder
这篇关于选择的插件选项不会传递给克隆行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！