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

Remove all the callbacks from an HTML element with jQuery

本文关键字：删除 回调 元素 jQuery HTML 使用      更新时间：2023-09-26

我有一个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");
                  }
                }
              });
            });
          });
        }

您可以使用:

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

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

相关文章：