莫代尔解除与衰落 [英] Modal unbind on fade
问题描述
这是一个$ P $版本pviously问的问题（模式窗口，并结合/解除绑定）。
This is version of a previously asked question (Modal windows and binding/unbinding).
我有一个表格，并选择当新增的出现模式窗口中的文本可以在字段中键入要添加到下拉列表。发生这种情况的8或9场。该缺陷是，如果用户通过单击上X或环绕箱黑暗的空间，然后选择驳回模式新增一次点击添加按钮，模式仍然是必然事件（我猜）等有一个双项，模态永远不会解雇，人们必须重新加载页面并重新开始。
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. This can happen for 8 or 9 fields. The bug is that if the user dismisses the modal by clicking either on the "X" or on the dark space around the box and then selected "Add New" again and clicks the "Add" button, the modal is still bound to the event (I guess) and so there is a double entry and the modal is never dismissed and one has to reload the page and start over.
那么，如何解除绑定的模式时，它要么被解雇了X，或通过单击条条框框？我用尽了一切我能想到的在阳光下（一些例子如下注释掉）。我试过unnesting的点击这里两次建议在这里为什么jQuery的ajax的职位？ 但是，这并不工作，或者我不知道如何正确地执行它。在这一段时间去过。有什么想法？
So how do I unbind the modal when it's dismissed either with the "X" or by clicking outside the box? I've tried everything I can think of under the sun (a few examples are commented out below). I've tried unnesting the clicks as suggested here Why does jQuery ajax post twice here? but that doesn't work, or I don't know how to implement it correctly. Been at this a while. Any thoughts?
<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 -->
我已经编辑到现在包括更多code。这一切都在一个视图中，但我现在已经包括了表格的顶部。问题是，当添加新在
I've edited to include more code now. It's all in one view, but I've included the top part of the form now. The problem is that when Add New is selected at
$('#upload_form option[value="addnew"]').click(function(event){
势必未来所有的点击在
it is bound to all future clicks at
$('#add-new-submit').click(function(){
因此，如果用户选择添加新的，然后通过单击关闭它驳回模式窗口，它仍然是约束，并在添加新再次被选中，实际上是输入的文本，并添加按钮单击该文本获取进入无论是现场和previous领域。
so that if the user selects Add New and then dismisses the modal window by clicking off of it, it is still bound and when Add New is selected again and text is actually entered and the Add button is clicked that text gets entered in both that field and the previous field.
所以我的问题依然存在：我怎么解除绑定click事件
So my question still stands: how do I unbind the click event
$('#upload_form option[value="addnew"]').click(function(event){
在模态通过单击X或点击关闭窗口解雇？
when the modal is dismissed by clicking the x or clicking off the window?
我已经被告知不要窝点击，但我不知道如何做到这一点没有嵌套点击以来的第一个click事件带来了第二次点击事件（尽管第二个是一个Add按钮，所以我想并不一定是一个点击。但我一直没能得到它作为提交给工作）
I've been told not to nest clicks, but I don't know how to do this without nesting clicks since the first click event brings up the second click event (although the second one is an Add button and so I suppose doesn't have to be a click; but I haven't been able to get it to work as a submit).
帮助！
推荐答案
首先，我让自己从你的HTML中删除所有PHP的东西，因为它并不重要这一点。
First of all, i allowed myself to remove all PHP stuff from your HTML since it's not important for this.
<div class="container">
<div class="row">
<div class="span12">
<h3>Upload your experimental data</h3>
<form class="form-horizontal well" action="/" method="post" enctype="multipart/form-data" id="upload_form">
<fieldset>
<legend>Animal Info</legend>
<!-- Animal Species -->
<div class="control-group">
<label class="control-label">Species</label>
<div class="controls">
<select>
<option><choose></option>
<option value="addnew">Add new</option>
</select>
</div>
</div>
<!-- Animal Condition -->
<div class="control-group">
<label class="control-label">Animal Condition</label>
<div class="controls">
<select>
<option><choose></option>
<option value="addnew">Add new</option>
</select>
</div>
</div>
<!-- Brain Area -->
<div class="control-group">
<label class="control-label">Brain Area</label>
<div class="controls">
<select>
<option><choose></option>
<option value="addnew">Add new</option>
</select>
</div>
</div>
</fieldset>
<!-- submit -->
<div class="form-actions">
<button type="submit" class="btn btn-primary">Upload »</button>
</div>
</form>
</div>
</div><!-- end row -->
<!-- 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 <!-- wtf? <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 -->
</div>
我也refacrtored你的JavaScript code，I注明所有重要的变化，我希望这不是混乱的
（我也删除了实际的Ajax调用，因为它不需要露面发生了什么）
And i also refacrtored your javascript code, i annotated all important changes, i hope it's not to confusing (I also removed the actual ajax call since it's unnecessary to show up what's happening)
$('#upload_form select').change(function(event){
var $select = $(this);
// abort if selected option is not the addnew one
if ($select.val() !== 'addnew') return;
// Get all elements we'll need later on once and put them in a variable,
// so jquery don't has to search them all over again everytime we need them
// http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-jquery-newbs-stop-jumping-in-the-pool/
var $add_new = $('#add-new')
, $add_new_text = $('#add-new-text')
, $add_new_submit = $('#add-new-submit')
, addNewOption; // This variable will get assigned our click handler, we'll need this later on
// Show the modal
$add_new.modal('show');
// You want this event handle to get called only once, .one() will do exactly that
// http://api.jquery.com/one/
$add_new_submit.one('click', addNewOption = function() { // Like i said above
var new_option_value = $add_new_text.val()
// Create a new option element
, $new_option = $('<option/>');
// Set it's value and text to the user input
// Note: in your application you should escape this before using it in any way, never trust user input
$new_option.val(new_option_value).text(new_option_value);
// Assuming the "Add New" option should always be the last one,
// add the new option in before it.
$select.children().last().before($new_option);
// Select it
$new_option.prop('selected', true);
$add_new_text.val('');
$add_new.modal('hide');
});
我觉得这是什么将解决您最实际的问题：
引导情态动词会触发时，他们会隐藏（以及何时会出现）一个事件的来源
请注意：如果您已经使用引导3，你必须在事件名称更改为 hide.bs.modal 的来源
Note: In case you're already using Bootstrap 3, the you'll have to change the event name to hide.bs.modalsource
$add_new.one('hide', function () {
// This will unbind explicitly the handler we attached above
$add_new_submit.unbind('click', addNewOption);
});
});
这里你可以找到与此code功能的jsfiddle。
Here you can find a functional jsFiddle with this code.
希望我可以帮助你在这，如果您有任何疑问，请随时问：）
Hope i could help you on this, if you have any questions, feel free to ask :)
这篇关于莫代尔解除与衰落的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
