为什么jQuery ajax在这里发布两次？

Question

第一次选择“添加新项”并添加新选项时，以下各项工作正常。第二次（针对按类别区分的其他元素）它将新选项添加​​到所选元素和第一个元素中。这两个元素都必须绑定到addnew。

  <script type="text/javascript">

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

          // Show modal window
          $('#add-new').modal('show');

          // Get the class

          var Classofentry = $(this).attr("class");

          $('#add-new-submit').on('click', function(){

              // Get new option from text field
              var value = $('#add-new-text').val();
              console.log(value);

              $.ajax({
                    type: "POST",
                    url: "<?php echo site_url(); ?>main/change_options",
                    data: {new_option: value, new_option_class: Classofentry},
                    dataType: "html",
                    error: errorHandler,
                    success: success
                  });

              function success(data)
              {

                  $('#'+Classofentry).append("<option value='" + data + "'selected=\"selected\">" + data + "</option>"); 
                  //alert(data);

                  //alert('Success!');

              }

              function errorHandler()
              {
                  alert('Error with AJAX!');
              }

              $('#add-new').modal('toggle');

           });
      });

  </script>

奇怪的是，它似乎两次遍历了ajax帖子。我想它正在查找所有“
addnew”值（到目前为止有2个，还会有更多）。我怎样才能只用指定的类来对待元素？希望这是有道理的。

Answer 1

感谢您的回复！我找到了一种方法，可以通过保留嵌套的点击但不绑定第二个点击来使其正常工作。我无法获得建议的解决方案（使所有功能都嵌套）正常工作。当它们没有嵌套时，似乎没有办法使第二次点击起作用。我不知道为什么。在调用ajax的函数中还必须具有success和errorHandler函数。这是代码（与上面的问题相同，但在第二个嵌套单击中包含unbind语句）：

  <script type="text/javascript">

        var Classofentry = '';

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

          // Show modal window
          $('#add-new').modal('show');

          // Get the class
          var Classofentry = $(this).attr("class");
          console.log(Classofentry);Thanks

        $('#add-new-submit').on('click', function(){

          // Get new option from text field
          var value = $('#add-new-text').val();
          console.log(value);

          $.ajax({
                type: "POST",
                url: "<?php echo site_url(); ?>main/change_options",
                data: {new_option: value, new_option_class: Classofentry},
                dataType: "html",
                error: errorHandler,
                success: success
              });

          $('#add-new-submit').unbind('click') // <-------------- The answer!!!!!
          $('#add-new').modal('toggle');


          function success(data)
          {

              //$('#animal_species').append("<option value='" + data + "'selected=\"selected\">" + data + "</option>"); 
              $('#'+Classofentry).append("<option value='" + data + "'selected=\"selected\">" + data + "</option>"); 
              //alert(data);

              //alert('Success!');

          }

          function errorHandler()
          {
              alert('Error with AJAX!');
          } 
        });
        });

  </script>