5

第一次选择“添加新”并添加新选项时，以下工作正常。第二次（对于按类区分的不同元素）它将新选项添加​​到所选元素和第一个元素。这两个元素都必须添加新的。

  <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 个，还会有更多）。我如何让它只用指定的类处理元素？希望这是有道理的。

4

3 回答 3

4

感谢您的回复！我找到了一种让它工作的方法，方法是将点击嵌套但取消绑定第二个。我无法让建议的解决方案（它取消所有功能）工作。当它们没有嵌套时，似乎没有办法让第二次点击起作用。我不确定为什么。在调用 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>
于 2013-07-17T13:25:17.830 回答
2

不要嵌套点击事件。

$('#add-new-submit')这里的问题是每次$('#upload_form option[value="addnew"]')触发点击事件时都会绑定点击事件

您的脚本应如下所示

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

    // Show modal window
    $('#add-new').modal('show');
    // Get the class
    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
    });
    $('#add-new').modal('toggle');

});

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

    //alert('Success!');
}

function errorHandler() {
    alert('Error with AJAX!');
}
于 2013-07-16T22:13:27.110 回答
0

正确的代码：

var Classofentry = '';
$('#upload_form option[value="addnew"]').click(function(){
// Show modal window
$('#add-new').modal('show');
    Classofentry = $(this).attr("class"); // Get the 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');

});
于 2013-07-16T22:18:05.250 回答