Question

这是之前提出的问题的版本（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 &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(){

因此，如果用户选择Add New然后通过单击它来关闭模态窗口，它仍然是绑定的，当再次选择Add New并且实际输入文本并单击Add按钮时输入文本该字段和前一个字段。

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

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

我认为这将解决您的实际问题：引导模态将在它们隐藏时（以及它们何时显示）触发事件source

注意：如果您已经在使用Bootstrap 3，则必须将活动名称更改为hide.bs.modal source

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

Here你可以找到这个代码的函数jsFiddle。

希望我可以帮助你，如果你有任何问题，请随时问：）

莫代尔在褪色时解开

1 个答案: