这是先前提出的问题（模态窗口和绑定/解除绑定）的版本。
I have a form and when "Add New" is selected a modal window appears in which text can be typed in a field to add to the dropdown. 这可能发生在 8 或 9 个字段中。错误是，如果用户通过单击“X”或框周围的黑暗空间来关闭模态，然后再次选择“添加新”并单击“添加”按钮，模态仍然绑定到事件（我猜）所以有一个双重输入，模式永远不会被解雇，一个人必须重新加载页面并重新开始。
那么，当使用“X”或在框外单击将其解除时，如何解除绑定？我已经尝试了我在阳光下能想到的一切（下面注释掉了几个例子）。我已经尝试按照此处的建议取消点击为什么 jQuery ajax 在这里发布两次？但这不起作用，或者我不知道如何正确实现它。有一段时间了。有什么想法吗？
<div class="container">
<div class="row">
<div class="span12">
<h3>Upload your experimental data</h3>
<form class="form-horizontal well" action="<?php echo site_url(); ?>main/upload_data" method="post" enctype="multipart/form-data" id="upload_form">
<fieldset>
<legend>Animal Info</legend>
<!-- Animal Species -->
<div class="control-group <?php if (form_error('animal_species')) { echo 'error'; } ?>">
<label class="control-label">Species</label>
<div class="controls">
<?php
# Add "Add New"
$options = $species + array('addnew' => 'Add New');
//var_dump($options);
echo form_dropdown('animal_species', $options
, set_value('animal_species', (isset($my_data->animal_species)) ? $my_data->animal_species: '')
, 'id = "animal_species"'
, 'class="animal_species"', 'addnew'
);
echo form_error('animal_species', '<span class="help-inline">', '</span>');
# var_dump($options);
//unset($species[0]); // remove first (blank) element
//$options_keys = $species;
//var_dump($options_keys);
?>
</div>
</div>
<!-- Animal Condition -->
<div class="control-group <?php if (form_error('animal_condition')) { echo 'error'; } ?>">
<label class="control-label">Animal Condition</label>
<div class="controls">
<?php
# Add "Add New"
$options = $condition + array('addnew' => 'Add New');
//var_dump($options);
echo form_dropdown('animal_condition', $options
, set_value('animal_condition', (isset($my_data->animal_condition)) ? $my_data->animal_condition: '')
, 'id = "animal_condition"'
, 'class="animal_condition"', 'addnew'
);
echo form_error('animal_condition', '<span class="help-inline">', '</span>');
?>
</div>
</div>
<!-- Brain Area -->
<div class="control-group <?php if (form_error('brain_area')) { echo 'error'; } ?>">
<label class="control-label">Brain Region</label>
<div class="controls">
<?php
# Add "Add New"
$options = $area + array('addnew' => 'Add New');
//var_dump($options);
echo form_dropdown('brain_area', $options
, set_value('brain_area', (isset($my_data->brain_area)) ? $my_data->brain_area: '')
, 'id = "brain_area"'
, 'class="brain_area"', 'addnew'
);
echo form_error('brain_area', '<span class="help-inline">', '</span>');
?>
</div>
</div>
</fieldset>
<!-- submit -->
<div class="form-actions">
<button type="submit" class="btn btn-primary">Upload »</button>
</div>
</form>
</div>
</div><!-- end row -->
<script type="text/javascript">
var Classofentry = '';
$('#upload_form option[value="addnew"]').click(function(event){
var Classofentry = $(this).attr("class");
$('#add-new-text').val(''); // Set input text field to blank
// Show modal window
$('#add-new').modal('show');
$('#add-new-submit').click(function(){
var value = $('#add-new-text').val();
$.ajax({
type: "POST",
url: "<?php echo site_url(); ?>main/change_options",
data: {new_option: value, new_option_class: Classofentry},
//dataType: "html",
dataType: "json",
error: errorHandler,
success: success
});
function success(data)
{
if (data[1])
{
// Add new entry
$('#'+Classofentry).append("<option value='" + data[0] + "'selected=\"selected\">" + data[0] + "</option>");
//alert(data[1]);
}
else
{
// Select the nonunique value by emptying it and appending
$('#'+Classofentry).empty("<option value=''selected=\"selected\">" + data[0] + "</option>").append("<option value='" + data[0] + "'selected=\"selected\">" + data[0] + "</option>");
//alert(data[0]);
}
}
function errorHandler()
{
//alert('Error with AJAX!');
alert(data[0]);
}
$('#add-new-submit').unbind('click'); // This fixes the problem for multiple entries
$('#add-new').modal('hide');
});
});
</script>
<!-- add-new field -->
<div class="modal small hide fade" id="add-new" tabindex="-1" role="dialog" aria-labelledby="add-new-fieldLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="add-new-fieldLabel">Add New Field</h3>
</div>
<div id="modal-body" class="modal-body">
<p>Would you like to add a new <span1></span1> option?</p>
<input type="text" id="add-new-text" name="add-new-text" placeholder="Type the new option">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" id="add-new-submit" name="add-new-submit"/>Add</button>
</div>
</div><!-- /add-new field -->
我现在进行了编辑以包含更多代码。这一切都在一个视图中，但我现在已经包含了表单的顶部。The problem is that when Add New is selected at
$('#upload_form option[value="addnew"]').click(function(event){
它绑定到所有未来的点击
$('#add-new-submit').click(function(){
因此，如果用户选择添加新然后通过单击关闭模式窗口来关闭它，它仍然是绑定的，并且当再次选择添加新并且实际输入文本并单击添加按钮时，该文本会在两个字段中输入和前一个字段。
所以我的问题仍然存在：如何取消绑定点击事件
$('#upload_form option[value="addnew"]').click(function(event){
当通过单击 x 或单击窗口关闭模式时？
我被告知不要嵌套点击，但我不知道如何在没有嵌套点击的情况下执行此操作，因为第一个点击事件会引发第二个点击事件（虽然第二个是添加按钮，所以我想不会必须点击一下；但我无法让它作为提交工作）。
帮助！