我已经创建了一个克隆div的脚本，但是工作正常，但是其中的javascript链接函数不再适用于任何克隆元素。按预期正常工作。
我在这里创建了一个jsfiddle：https://jsfiddle.net/bvcebmbw/
javascript如下（对于链式和克隆函数）
$(document).ready(function () {
$(".Targeting").each(function () {
$('#TargetingAdd').click(function () {
var num = $('.clonedTargeting').length, // Checks to see how many "duplicatable" input fields we currently have
newNum = new Number(num + 1), // The numeric ID of the new input field being added, increasing by 1 each time
newElem = $('#entryTargeting' + num).clone().attr('id', 'entryTargeting' + newNum).fadeIn('slow'); // create the new element via clone(), and manipulate it's ID using newNum value
// Insert the new element after the last "duplicatable" input field
$('#entryTargeting' + num).after(newElem);
// Enable the "remove" button. This only shows once you have a duplicated section.
$('#TargetingDel').attr('disabled', false);
init(newElem.children(".Targeting"));
// Right now you can only add 4 sections, for a total of 5. Change '5' below to the max number of sections you want to allow.
if (newNum == 5)
$('#TargetingAdd').attr('disabled', true).prop('value', "You've reached the limit"); // value here updates the text in the 'add' button when the limit is reached
});
$('#TargetingDel').click(function () {
// Confirmation dialog box. Works on all desktop browsers and iPhone.
if (confirm("Are you sure you wish to remove this Targeting?")) {
var num = $('.clonedTargeting').length;
// how many "duplicatable" input fields we currently have
$('#entryTargeting' + num).slideUp('slow', function () {
$(this).remove();
// if only one element remains, disable the "remove" button
if (num - 1 === 1)
$('#TargetingDel').attr('disabled', true);
// enable the "add" button
$('#TargetingAdd').attr('disabled', false).prop('value', "add section");
});
}
return false; // Removes the last section you added
});
});
// Enable the "add" button
$('#TargetingAdd').attr('disabled', false);
// Disable the "remove" button
$('#TargetingDel').attr('disabled', true);
});
;(function($, window, document, undefined) {
"use strict";
$.fn.chained = function(parent_selector, options) {
return this.each(function() {
/* Save this to child because this changes when scope changes. */
var child = this;
var backup = $(child).clone();
/* Handles maximum two parents now. */
$(parent_selector).each(function() {
$(this).bind("change", function() {
updateChildren();
});
/* Force IE to see something selected on first page load, */
/* unless something is already selected */
if (!$("option:selected", this).length) {
$("option", this).first().attr("selected", "selected");
}
/* Force updating the children. */
updateChildren();
});
function updateChildren() {
var trigger_change = true;
var currently_selected_value = $("option:selected", child).val();
$(child).html(backup.html());
/* If multiple parents build classname like foo\bar. */
var selected = "";
$(parent_selector).each(function() {
var selectedClass = $("option:selected", this).val();
if (selectedClass) {
if (selected.length > 0) {
if (window.Zepto) {
/* Zepto class regexp dies with classes like foo\bar. */
selected += "\\\\";
} else {
selected += "\\";
}
}
selected += selectedClass;
}
});
/* Also check for first parent without subclassing. */
/* TODO: This should be dynamic and check for each parent */
/* without subclassing. */
var first;
if ($.isArray(parent_selector)) {
first = $(parent_selector[0]).first();
} else {
first = $(parent_selector).first();
}
var selected_first = $("option:selected", first).val();
$("option", child).each(function() {
/* Remove unneeded items but save the default value. */
if ($(this).hasClass(selected) && $(this).val() === currently_selected_value) {
$(this).prop("selected", true);
trigger_change = false;
} else if (!$(this).hasClass(selected) && !$(this).hasClass(selected_first) && $(this).val() !== "") {
$(this).remove();
}
});
/* If we have only the default value disable select. */
if (1 === $("option", child).size() && $(child).val() === "") {
$(child).prop("disabled", true);
} else {
$(child).prop("disabled", false);
}
if (trigger_change) {
$(child).trigger("change");
}
}
});
};
/* Alias for those who like to use more English like syntax. */
$.fn.chainedTo = $.fn.chained;
/* Default settings for plugin. */
$.fn.chained.defaults = {};
})(window.jQuery || window.Zepto, window, document);
$(document).ready(function(){
$("#connectionSub").chained("#connectionType");
$("#apppagesoptions").chained("#connectionSub");
$("#phoneVersion").chained("#phoneBrand");
$("#osVersionMin").chained("#phoneVersion");
$("#osVersionMax").chained("#phoneVersion");
});
并且HTML是3个链式输入：
<div class="Targeting">
<select id="connectionType" name="connectionType[]">
<option disabled value="">--</option>
<option value="pages">Facebook Pages</option>
<option value="apps">Apps</option>
<option disabled value="">--</option>
<option value="advanced">Advanced Connections</option>
</select>
<select id="connectionSub" name="connectionSub[]">
<option value="">--</option>
<option value="page_like" class="pages">People who like your Page</option>
<option value="page_friend" class="pages">Friends of people who like your Page</option>
<option value="page_exclude" class="pages">Exclude people who like your Page</option>
<option value="app_like" class="apps">People who like your App</option>
<option value="app_friend" class="apps">Friends of people who like your App</option>
<option value="app_exclude" class="apps">Exclude people who like your App</option>
</select>
<select id="apppagesoptions" name="apppagesoptions[]" multiple>
<option>test</option>
</select>
</div>
</div><!-- end #entry1 -->
<div id="addDelButtons">
<input type="button" id="TargetingAdd" value="add section">
<input type="button" id="TargetingDel" value="remove section above">
</div>
感谢您的任何帮助！
答案 0 :(得分：0)
对于所有<div class="Targeting">，select元素的ID都保持不变。这就是为什么它只适用于第一个。