模态在褪色时解除绑定

Question

这是先前询问的问题的版本（ 模态窗口和绑定/解除绑定 ）。

我有一个表单，当选择“添加新”时，会出现一个模式窗口，您可以在其中键入文本以添加到下拉菜单中。 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 &raquo;</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(){ 

因此，如果用户选择“添加新的”，然后通过单击关闭它来关闭模式窗口，则它仍然是绑定的，当再次选择“添加新的”并实际输入文本并单击“添加”按钮时，将在该字段中同时输入文本和前一个字段。

所以我的问题仍然存在：如何解除点击事件的绑定

$('#upload_form option[value="addnew"]').click(function(event){ 

通过单击x或单击窗口来关闭模态时？

有人告诉我不要嵌套点击，但是我不知道如何不嵌套点击，因为第一次单击事件会引发第二次单击事件（尽管第二次是“添加”按钮，所以我想不这样做）必须点击一下，但我无法将其作为提交工作）。

救命！

Answer 1

首先，我允许自己从HTML中删除所有PHP内容，因为这并不重要。

<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>&lt;choose&gt;</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>&lt;choose&gt;</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>&lt;choose&gt;</option>
                <option value="addnew">Add new</option>
              </select>
            </div>
          </div> 

        </fieldset>

        <!-- submit -->
        <div class="form-actions">
          <button type="submit" class="btn btn-primary">Upload &raquo;</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>

。

而且我还重新编写了您的JavaScript代码，注释了所有重要的更改，希望不要混淆（我也删除了实际的ajax调用，因为不必显示正在发生的事情）

$('#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');
  });

我认为这将解决您的实际问题：Bootstrap Modals将在隐藏（以及显示时） 源时触发一个事件

注意：如果您已经在使用Bootstrap 3，则必须将事件名称更改为hide.bs.modal 源。

  $add_new.one('hide', function () {
    // This will unbind explicitly the handler we attached above
    $add_new_submit.unbind('click', addNewOption); 
  });
});

在这里，您可以找到具有此代码的功能性jsFiddle。

希望我能在这方面为您提供帮助，如果您有任何疑问，请随时提出:)