0
이것은 이전에 질문되었던 문제 (Modal windows and binding/unbinding)의 버전입니다.페이드에서 모달 바인딩 해제
양식이 있고 "새로 추가"를 선택하면 텍스트를 필드에 입력하여 드롭 다운에 추가 할 수있는 모달 창이 나타납니다. 이것은 8 개 또는 9 개의 필드에 대해 발생할 수 있습니다. 버그는 사용자가 "X"를 클릭하거나 상자 주위의 어두운 공간을 클릭하여 모달을 해제 한 다음 "새로 추가"를 다시 선택하고 "추가"버튼을 클릭하면 모달이 여전히 이벤트에 바인딩됩니다 (나는 짐작한다) 그래서 두 배 항목이 있고 모달은 결코 해산되지 않으며 사람은 페이지를 새로 고침하고 다시 시작해야한다.
그래서 "X"를 사용하거나 상자 외부를 클릭하여 모달을 해제 할 때 모달을 바인딩 해제하려면 어떻게해야합니까? 저는 태양 아래에서 생각할 수있는 모든 것을 시도했습니다 (몇 가지 예가 아래에 설명되어 있습니다). 여기에 제안 된대로 클릭 해제를 시도했지만 Why does jQuery ajax post twice here?, 작동하지 않거나 올바르게 구현하는 방법을 모르겠습니다. 이 시간이 좀있어. 이견있는 사람?
<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 -->
더 많은 코드를 포함하도록 수정했습니다. 모두 한 눈에 볼 수 있지만 양식 상단 부분을 포함 시켰습니다. 문제는 새로운
$('#upload_form option[value="addnew"]').click(function(event){
에서 선택 추가 할 때 그것이 너무
$('#add-new-submit').click(function(){
에서 미래의 모든 클릭에 바인딩 있다는 것을 사용자가 새로 추가를 선택하고 다음 오프를 클릭하여 모달 창을 일축 경우 그것은 여전히 바인딩되어 있고 새로 추가를 다시 선택하면 텍스트가 실제로 입력되고 추가 단추를 클릭하면 해당 텍스트가 해당 필드와 이전 필드에 모두 입력됩니다.
그래서 제 질문은 여전히 약자 모달는 x를 클릭하거나 창을 클릭하여 해제 할 때 내가 클릭 이벤트
$('#upload_form option[value="addnew"]').click(function(event){
바인딩을 해제 어떻게?
나는 클릭 수를 중첩하지 말라고 들었지만 첫 번째 클릭 이벤트가 두 번째 클릭 이벤트를 발생시키기 때문에 중첩 클릭없이이를 수행하는 방법을 알지 못합니다. 두 번째 클릭 이벤트는 추가 버튼이기 때문에 클릭이 아니어도 되겠지만 제출으로 작동 할 수는 없습니다.)
도움말!
당신이 내가 일하고 있어요 최소한의 테스트 케이스 –
을 만들 수 .. 작업 예제없이 말을하기가 어렵다 최소의 테스트 케이스에서. 모달 중 한 요소가 외부의 모달 클릭에 대한 해고를 담당하는 모달 요소가 무엇인지 알아두면 좋을 것입니다. – MysticalTautologist
이것은'data-dismiss = "모달"속성입니다. –