【发布时间】：2016-04-25 09:23:55
【问题描述】：
我正在使用 Bootstrap、jQuery、HTML 和 Django 后端处理一些前端表单。在表单中的某一时刻，用户应该添加“软件”信息，然后可以选择上传软件文件或使用其托管文件的 URL。 URL 选项允许从多个 URL 位置下载文件。还有一个添加多个软件包的选项，因此如果他们想添加另一个，有一个“添加”按钮可以克隆表单组并允许用户输入另一个软件包的信息。
我不确定如何使克隆数据获得它自己的键值以在后端使用的动态，但现在我最大的问题是当您单击Add More Software... 按钮时，单选按钮被克隆只会影响原始单选按钮，并且不会将 .switchClass() 事件绑定到它们以更改它们的外观。我一生都无法弄清楚如何让单选按钮绑定到它们被克隆的 HTML。我附上了一个jsfiddle来查看：
jQuery clone() and Radio Buttons
我的问题是，我将如何使其更具动态性，以便按钮与与单选按钮一起克隆的 HTML 一起使用，以及如何将克隆的表单组设置为动态以获取背面的值 -结束了吗？
<div class="software-container">
<div class="form-group">
<label class="col-sm-2 control-label">
* Files
</label>
<div class="col-sm-9">
<div class="btn-group" data-toggle="buttons">
<label id="software-upload-btn" for="software-upload" class="btn btn-default">
<input id="software-upload" type="radio" name="software-upload" value="upload"> Upload
</label>
<label id="software-url-btn" for="software-upload" class="btn btn-default">
<input id="software-url" type="radio" name="software-url" value="url"> URL
</label>
</div>
</div>
</div>
<div id="software-upload-panel" class="hidden">
<div class="form-group upload-container">
<div class="col-sm-offset-2 col-sm-9">
<input type="file" id='software-file' name="software-file" title="" placeholder="No File">
</div>
</div>
</div>
<div id="software-url-panel" class="hidden">
<div class="form-group url-container">
<div class="col-sm-offset-2 col-sm-9">
<input type="url" id="software-file" name="software-file" class="form-control" placeholder="https://www.example.com/my-software-4.6.tar.gz" title="">
<button class="close hidden" type="button">x</button>
</div>
</div>
<div class="form-group add-url-container">
<div class="col-sm-offset-2 col-sm-9">
<button class="add-url btn btn-default" type="button">
<i class="glyphicon glyphicon-plus"></i> Add Another URL...
</button>
</div>
</div>
</div>
</div>
<div class="form-group add-container">
<label for="add-btn" class="col-sm-2 control-label">
Add Software:
</label>
<div class="col-sm-9">
<button id="add-software-btn" class="btn btn-default" type="button">
<i class="glyphicon glyphicon-plus"></i> Add More Software...
</button>
</div>
</div>
还有我的 js：
$(document).ready(function() {
// Actions for URL/Upload button options
$('#software-upload-btn').click(function() {
if ($('.active')) {
$('#software-upload-btn').switchClass('btn-default', 'btn-info', 0);
$('#software-upload-panel').removeClass('hidden');
$('#software-url-btn').switchClass('btn-info', 'btn-default', 0);
$('#software-url-panel').addClass('hidden');
}
});
$('#software-url-btn').click(function() {
if ($('.active')) {
$('#software-url-btn').switchClass('btn-default', 'btn-info', 0);
$('#software-url-panel').removeClass('hidden');
$('#software-upload-btn').switchClass('btn-info', 'btn-default', 0);
$('#software-upload-panel').addClass('hidden');
}
});
// Add button actions
$(document).on('click', '.add-url:last', function() {
$('.url-container:first').clone().insertAfter($('.url-container:last'))
.find('.close').removeClass('hidden');
$('.close').click(function() {
$(this).closest('div.url-container').remove();
});
});
$(document).on('click', '#add-software-btn:last', function() {
$('.software-container:first').clone(true)
.insertAfter($('.software-container:last'));
});
});
【问题讨论】：
-
因为
id应该是唯一的。所以选择器不起作用。 -
好的@RejithRKrishnan，这绝对有道理。不知道为什么我还没有看到。我会先检查一下，然后告诉你。希望事情就这么简单。
-
好的@RejithRKrishnan，现在不是上传和url单选按钮只更改pre/original单选按钮，当我让它们类时它会改变它们。所以我假设这是“动态”部分的用武之地。但我不确定如何使用 jQuery 的 clone() 以及使这些按钮仅适用于它们的克隆面板/容器的最佳方法
-
你能添加最新的小提琴吗？
-
@RejithRKrishnan ~ jsfiddle.net/charlwillia6/tavjepdb/16
标签： javascript jquery html twitter-bootstrap clone