为什么jQuery的阿贾克斯张贴在这里两次？ [英] Why does jQuery ajax post twice here?

问题描述

以下工作正常，我第一次选择添加新，并增加了新的选择。第二时间（由类区别不同的元素）它增加了新的选项，以选择的元件与第一个。这两个元素结合到ADDNEW。

The following works fine the first time I select "Add New" and add a new option. The second time (for a different element distinguished by class) it adds the new option to the selected element and the first one. Both elements are bound to 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个，到目前为止，会有更多）。我如何得到它只是把与指定类的元素？希望这是有道理的。

The weird thing is that it seems to loop through the ajax a post twice. I suppose it's finding all the "addnew" values (there are 2 so far, there will be more). How do I get it to just treat the element with the designated class? Hope this makes sense.

推荐答案

感谢您的答复！我找到了一种方法来得到它留下的点击嵌套，但解除绑定第二个工作。我无法得到的建议solns（其中UNNEST所有功能）工作。似乎有没有办法让第二次点击时没有嵌套他们的工作。我不知道为什么。它也有必要的函数调用AJAX里面的成功和的ErrorHandler功能。这里的code（相同以上，但在第二嵌套点击解除绑定语句的问题）：

Thanks for you responses! I found a way to get it to work by leaving the clicks nested but unbinding the second one. I could not get the suggested solns (which unnest all the functions) to work. There seems to be no way to get the second click to work when they are not nested. I'm not sure why. It's also necessary to have the success and errorHandler functions inside the function calling ajax. Here's the code (identical the question above but with the unbind statement in the second nested click):

  <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>

这篇关于为什么jQuery的阿贾克斯张贴在这里两次？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！