これは、以前に寄せられた質問 (モーダル ウィンドウとバインディング/アンバインディング) のバージョンです。
フォームがあり、[新規追加] を選択すると、ドロップダウンに追加するフィールドにテキストを入力できるモーダル ウィンドウが表示されます。これは、8 または 9 フィールドで発生する可能性があります。バグは、ユーザーが「X」またはボックスの周りの暗いスペースをクリックしてモーダルを閉じ、次に「新規追加」を再度選択して「追加」ボタンをクリックすると、モーダルがまだイベントにバインドされていることです。 （私は推測します）そして、二重のエントリがあり、モーダルが閉じられることはなく、ページをリロードして最初からやり直す必要があります。
では、「X」またはボックスの外側をクリックしてモーダルを閉じたときに、モーダルのバインドを解除するにはどうすればよいでしょうか。太陽の下で考えられることはすべて試しました (いくつかの例は以下にコメントアウトされています)。ここで提案されているように、クリックのネストを解除しようとしましたなぜjQuery ajaxがここに2回投稿するのですか? しかし、それは機能しないか、正しく実装する方法がわかりません。しばらくこれにいた。何かご意見は？
<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 -->
より多くのコードを含めるように編集しました。すべてが 1 つのビューに表示されますが、フォームの上部を含めました。問題は、[新規追加] が選択されたときです。
$('#upload_form option[value="addnew"]').click(function(event){
での今後のすべてのクリックにバインドされます。
$('#add-new-submit').click(function(){
そのため、ユーザーが [新規追加] を選択し、モーダル ウィンドウをクリックして閉じても、ウィンドウはバインドされたままであり、[新規追加] を再度選択してテキストを実際に入力し、[追加] ボタンをクリックすると、両方のフィールドにテキストが入力されます。そして前のフィールド。
だから私の質問はまだ立っています:クリックイベントのバインドを解除するにはどうすればよいですか
$('#upload_form option[value="addnew"]').click(function(event){
xをクリックするか、ウィンドウをクリックしてモーダルを閉じたときは?
クリックをネストしないように言われましたが、最初のクリック イベントで 2 番目のクリック イベントが発生するため、クリックをネストせずにこれを行う方法がわかりません (ただし、2 番目のクリック イベントは [追加] ボタンであるため、そうではないと思います)。クリックする必要がありますが、送信として機能させることができませんでした)。
ヘルプ！