Question

我有一个select菜单，在通过AJAX进行更改后会生成另一个select菜单，而这个菜单又会生成另一个select菜单，其中包含另一个更改回调（让说alert(chosenValue)）。通过第一次完成这些select菜单，我可以正确生成第二个和第三个select的内容，并正确打印警报。

从第二次开始，当我为第三个select生成新内容时，在选择选项时，将使用位于select中该位置的元素触发多个警报。我猜这些回调在哪里产生并停留在那里，因为我用$("select#dropdownMenu3").change(function() {...});生成它们。

有没有办法删除这些生成的回调并再次拥有“处女”select#dropdownMenu3？我正在使用jQuery，如果解决方案包含它，那么大的优势！谢谢！

编辑：代码因为 - reEDIT：我开始认为问题更为严重。这是整个事物

/*All the variables that you see used are defined somewhere up here*/
$("select#dropdownMenu1").change(function(){
          $('select#dropdownMenu3').unbind('change');
          var typeChosen = $(this).children(":selected").html();
          if(!searchSuggestions){
          $.get( "/searchdata", function( data ) {
            data = JSON.parse(data);
            searchSuggestions = data;
            for(var i = 0; i < data.length; i++){
              if(data[i].type == typeChosen){
                $("#dropdownMenu2").empty();
                $("#dropdownMenu2").append("<option disabled>Choose a Predicate</option>");
                for(var j = 0; j < data[i].predicates.length; j++){
                    $("#dropdownMenu2").append("<option value='" + j + "'>" + data[i].predicates[j].predicate + "</option>");
                }
              }
            }
            $("#dropdownMenu2").select2();
            $("select#dropdownMenu2").change(function(){
              predicateChosenIndex = parseInt($(this).children(":selected").val());
              $("#tdDropdownMenu3").html("");
              $('#tdDropdownMenu3').append("<select class=\"js-example-basic-multiple\" id=\"dropdownMenu3\"><option disabled>Choose an Object</option></select>");
              for(var i = 0; i < data.length; i++){
                if(data[i].type == typeChosen){
                  for(var k = 0; k < data[i].predicates[predicateChosenIndex].values.length; k++){
                    $("#dropdownMenu3").append("<option value='" + k + "'>" + data[i].predicates[predicateChosenIndex].values[k].value + "</option>");
                  }
                }
              }
              $("#dropdownMenu3").select2();
              $("select#dropdownMenu3").change(function(){
                objectChosenIndex = parseInt($(this).children(":selected").val());
                for(var i = 0; i < data.length; i++){
                  if(data[i].type == typeChosen){
                    alert(data[i].predicates[predicateChosenIndex].values[objectChosenIndex].value + " chosen");
                  }
                }
              });
            });
          });
        }

Answer 1

您可以使用：

$('select#dropdownMenu3').unbind('change');

但只要我们不知道你如何生成你的html，这可能不是最好的解决方案。

使用jQuery从HTML元素中删除所有回调

1 个答案: