骨干事件不清除undelegate

Question

我一直在骨干错误，我试图清理事件使用undelegate也试图解绑。实际上，当我从drop中选择值时，它会创建3个从数据库中绘制的网格。但是，当我点击其他地方，并再次在相同的点击下拉显示四个单位。

我猜想它是由于鬼事件，因此下面尝试的问题。但它似乎没有工作。我可以知道哪里出错了。

任何帮助深表谢意。感谢提前

var towersetupimageview = Backbone.View.extend({ 

    el : jQuery('#imageBlocksDiv'), 

    events : { 
      'keypress #no_of_towers' : 'totaltowers', 
      'change .floortypedropdownfortowerfloor': 'showflatsinfloorwise', 
      'click .saveflatdetails' : 'save_flat_details', 
      'click .updateflatdetails' : 'update_flat_details', 
    }, 
    template: _.template(jQuery('#towersviewaccordian').html()), 
    cleanup: function() { 
     alert() 
     this.delegateEvents(); 
     jQuery(this.el).empty(); 

    }, 
    initialize : function(){ 

     _.bindAll(this, 'cleanup'); 


     // _.bindAll(this); 



     this.cleanup(); 
     this.unbind(); 
     var that = this; 
     this.$el.html(this.template()); 
     this.$el.append('<select style="float:left;padding:2px;" id="towersetupflats"></select>'); 
     jQuery.ajax({ 
       'cache': false, 
       'type':'GET', 
       'url': jQuery('#baseurl').val()+'index.php/api/authentication/content/'+jQuery('#towersetup').val()+'/sctowers', 
       success : function(response){ 
         for(var i=0;i<response.length;i++){ 
           jQuery('#towersetupflats').append('<option value="'+response[i]['objectId']+'">'+response[i]['tower_name']+'</option>'); 
         } 
         that.showflatsfortower(jQuery('#towersetupflats').val()); 
       } 
     }); 
     jQuery('#towersetupflats').change(function(){ 
      jQuery('#towerflatsetview').html(''); 
      that.showflatsfortower(jQuery('#towersetupflats').val()); 
     }); 
    }, 

    showflatsfortower : function(towerid){ 
       var that = this; 
       jQuery('#imageBlocksDiv').append('<div style="float: left;margin-left: -9%;margin-top: 5%;width: 92%" id="towerflatsetview"></div>'); 
       jQuery.ajax({ 
        'cache': false, 
        'type':'GET', 
        'url': jQuery('#baseurl').val()+'index.php/api/authentication/randomdata/sctowers/objectId/'+towerid, 
         success : function(response){ 
          console.log(response); 
          for(i=0;i<response[0]['no_of_floors'];i++){ 
            jQuery('#towerflatsetview').append('<br><br><div class="towersetupstyle"><div style="float:left;margin-top:17px;"><span id="floornumber">'+i+'</span></div><div ><select id="floortypedropdownfortowerfloor'+i+'" class="floortypedropdownfortowerfloor"><option>Select Floor Type</option></select></div></div>'); 
          } 
          that.getfloortypename(); 
         } 
       }); 
    }, 
      getfloortypename : function(){ 
       jQuery.ajax({ 
        'cache': false, 
        'type':'GET', 
        'url': jQuery('#baseurl').val()+'index.php/api/authentication/content/'+jQuery('#towersetup').val()+'/scfloortype', 
         success : function(response1){ 
           console.log(response1); 
           for(i=0;i<response1.length;i++){ 
             jQuery('.floortypedropdownfortowerfloor').append('<option value="'+response1[i]['objectId']+'">'+response1[i]['name']+'</option>'); 
           } 
         } 
       }); 
      }, 
      showflatsinfloorwise : function(ev){ 
       var currentselect = jQuery(ev.currentTarget).attr('id'); 
       var that = this; 
       var pushflatid = []; 
       var j = 1; 
       var floor_no = 'id'+jQuery(ev.currentTarget).parents().eq(1).find('#floornumber').text(); 
       jQuery('#'+currentselect).parents().eq(1).find('.inventory_field').remove(); 
        jQuery.ajax({ 
         'cache': false, 
         'type':'GET', 
         'url': jQuery('#baseurl').val()+'index.php/api/authentication/flatdetails/sc_flat/tower_object_id/'+jQuery('#towersetupflats').val()+'/floorplan_type_object_id/'+jQuery(ev.currentTarget).val()+'/floor_no/'+floor_no, 
         success : function(responses){ 
          // console.log(responses); 
          var k = 1; 
          if(responses['error'] == "could not be found"){ 
           jQuery.ajax({ 
             'type':'GET', 
             'url': jQuery('#baseurl').val()+'index.php/api/authentication/randomdata/scunitplan_on_floortype/floortype_object_id/'+jQuery('#'+currentselect).val(), 
             success : function(responses1){ 
              for(var j = 0; j<responses1.length; j++){ 
               jQuery.ajax({ 
                'type':'GET', 
                'url':jQuery('#baseurl').val()+'index.php/api/authentication/randomdata/scunitplantype/objectId/'+responses1[j]['unitplantype_object_id']+'', 
                success : function(newdata){ 
                  jQuery('#'+currentselect).parents().eq(1).append('<div class="inventory_field"><div class="flats_in_floor"><select class="update_unitplantypename"><option value="'+newdata[0]['objectId']+'">'+newdata[0]['name']+'</option></select></div></div>'); 
                } 
               }); 
              } 
              that.getflatname(currentselect); 

             } 
           }); 
          } 
          else{ 
           for(var i = 0; i<responses.length; i++){ 
            pushflatid.push(responses[i]['objectId']); 
            jQuery.ajax({ 
             'type':'GET', 
             'url':jQuery('#baseurl').val()+'index.php/api/authentication/randomdata/scunitplantype/objectId/'+responses[i]['unitplan_object_id'], 
             success : function(newdata){ 
               jQuery('#'+currentselect).parents().eq(1).append('<div class="inventory_field" id="inventory_field'+j+'"><div class="flats_in_floor"><select class="update_unitplantypename"><option value="'+newdata[0]['objectId']+'">'+newdata[0]['name']+'</option></select></div></div>'); 
               j++; 
             } 
            }); 
            jQuery.ajax({ 
             'cache': false, 
             'type':'GET', 
             'url': jQuery('#baseurl').val()+'index.php/api/authentication/randomdata/sc_flat_common_fields_details/flat_object_id/'+responses[i]['objectId'], 
             success : function(newres){ 
              for(var j=0; j<newres.length; j++){ 
                jQuery('#'+currentselect).parents().eq(1).find('#inventory_field'+k).append('<div style="float:left;width:100%"><span style="width: 60px;float: left;margin: 5px;">'+newres[j]['common_field_name']+'</span><span style="margin:5px;float:left;"><input type="text" value="'+newres[j]['common_field_value']+'" id="'+newres[j]['objectId']+'" size="10" class="flat_common_field_value"><span></div>'); 
                //jQuery('#'+currentselect).parents().eq(1).find('#inventory_field'+k+ ' .flat_common_field_value[data-objectid="'+inputid+'"]').attr('id',invfield[0]['objectId']); 
                if(j == "4"){ k++; } 
              } 
              var kval = (k-1); 
              jQuery('#'+currentselect).parents().eq(1).find('#inventory_field'+kval).append('<div class="updateflatdetails">Update</div><div class="flat_common_loader"><img style="float:right" src="http://www.dwellar.com/portal/assets/icon/dots.gif"></div><div class="update_flat_message">Update Flat Details..</div>'); 
             } 
            }); 
           } 
           //that.getflatdetails(currentselect,pushflatid); 
          } 
         } 

        }); 

      }, 
      getflatdetails : function(currentselect,flatid){ 
       var that = this; 
       jQuery.ajax({ 
        'cache': false, 
        'type':'GET', 
        'url':jQuery('#baseurl').val()+'index.php/api/authentication/content/'+jQuery('#towersetup').val()+'/sc_inventory_fieldconfigured', 
        success : function(invfield){ 
         for(var k=0; k<invfield.length; k++){ 
          jQuery('#'+currentselect).parents().eq(1).find('.inventory_field').append('<div style="float:left;width:100%;"><span style="width: 60px;float: left;margin: 5px;">'+invfield[k]['field_name']+'</span><span style="margin:5px;float:left;"><input type="text" size="10" id="'+invfield[k]['field_name']+'" data-objectid="'+invfield[k]['objectId']+'" class="flat_common_field_value" onload="'+that.myFunction(flatid,invfield[k]['objectId'],currentselect)+'"></span></div>'); 
         } 
         jQuery('#'+currentselect).parents().eq(1).find('.inventory_field').append('<div class="updateflatdetails">Update</div><div class="flat_common_loader"><img style="float:right" src="http://www.dwellar.com/portal/assets/icon/dots.gif"></div><div class="update_flat_message">Update Flat Details..</div>'); 
        } 
       }); 
      }, 
      myFunction : function(flatid,inputid,currentselect){ 
       var j = 1; 
       for(var n = 0; n<flatid.length; n++){ 
        jQuery.ajax({ 
         'cache': false, 
         'type':'GET', 
         'url':jQuery('#baseurl').val()+'index.php/api/authentication/newrandomdata/sc_flat_common_fields_details/flat_object_id/'+flatid[n]+'/common_field_object_id/'+inputid, 
         success : function(invfield){ 
          jQuery('#'+currentselect).parents().eq(1).find('#inventory_field'+j+ ' .flat_common_field_value[data-objectid="'+inputid+'"]').val(invfield[0]['common_field_value']); 
          jQuery('#'+currentselect).parents().eq(1).find('#inventory_field'+j+ ' .flat_common_field_value[data-objectid="'+inputid+'"]').attr('id',invfield[0]['objectId']); 
          j++; 
         } 
        }); 
       } 
      }, 
      getflatname : function(currentselect){ 
       jQuery.ajax({ 
        'type':'GET', 
        'url':jQuery('#baseurl').val()+'index.php/api/authentication/content/'+jQuery('#towersetup').val()+'/sc_inventory_fieldconfigured', 
        success : function(invfield){ 
         //console.log(invfield.length); 
         for(var k=0; k<invfield.length; k++){ 
          jQuery('#'+currentselect).parents().eq(1).find('.inventory_field').append('<div style="float:left;width:100%;"><span style="width: 60px;float: left;margin: 5px;">'+invfield[k]['field_name']+'</span><span style="margin:5px;float:left;"><input type="text" size="10" id="'+invfield[k]['field_name']+'" data-objectid="'+invfield[k]['objectId']+'" class="flat_common_field_value"></span></div>'); 
         } 
          jQuery('#'+currentselect).parents().eq(1).find('.inventory_field').append('<div class="saveflatdetails">Save</div><div class="flat_common_loader"><img style="float:right" src="http://www.dwellar.com/portal/assets/icon/dots.gif"></div><div class="save_flat_message">Flat Details Saved..</div>'); 
        } 
       }); 
      }, 

      save_flat_details : function(ev){ 
       var currentbuton = ev.currentTarget; 
       jQuery(ev.currentTarget).parents().eq(0).find('.flat_common_loader').show(); 
       var fl = jQuery(ev.currentTarget).parents().eq(0).find('.flat_common_field_value').length; 
       var ij = 0; 
        var fieldinputData = { 
          'tower_object_id' : jQuery('#towersetupflats').val(), 
          'floor_no' : 'id'+jQuery(ev.currentTarget).parents().eq(1).find('#floornumber').text(), 
          'floorplan_type_object_id' : jQuery(ev.currentTarget).parents().eq(1).find('.floortypedropdownfortowerfloor').val(), 
          'unitplan_object_id' : jQuery(ev.currentTarget).parents().eq(0).find('.update_unitplantypename').val(), 
          'projectId' : jQuery('#towersetup').val(), 
        }; 
        jQuery.ajax({ 
         'type':'POST', 
         'url': jQuery('#baseurl').val()+'index.php/api/example/content/sc_flat', 
         'data' : fieldinputData, 
         success : function(field){ 
          console.log(field); 

           jQuery(ev.currentTarget).parents().eq(0).find('.flat_common_field_value').each(function(){ 
            var fieldinputData = { 
              'flat_object_id' : field.objectId, 
              'projectId' : jQuery('#towersetup').val(), 
              'common_field_object_id' : jQuery(this).attr('data-objectid'), 
              'common_field_value' : jQuery(this).val(), 
              'common_field_name' : jQuery(this).attr('id') 
            }; 
            jQuery.ajax({ 
             'type':'POST', 
             'url': jQuery('#baseurl').val()+'index.php/api/example/content/sc_flat_common_fields_details', 
             'data' : fieldinputData, 
             success : function(response){ 
              console.log(response) 
              jQuery(currentbuton).parents().eq(0).find('.flat_common_loader').hide(); 
              if(fl/ij == "1"){ 
               jQuery(currentbuton).parents().eq(0).find('.save_flat_message').show(); 
               jQuery(currentbuton).parents().eq(0).find('.save_flat_message').fadeOut(3000); 
              } 
             } 

            }); 
            ij++; 
           }); 
         } 
        }); 

      }, 
      update_flat_details : function(ev){ 
       jQuery(ev.currentTarget).parents().eq(0).find('.flat_common_loader').show(); 
       var currentbuton = ev.currentTarget; 
       var ij = 0; 
       var fl = jQuery(ev.currentTarget).parents().eq(0).find('.flat_common_field_value').length; 
       jQuery(ev.currentTarget).parents().eq(0).find('.flat_common_field_value').each(function(){ 
        var fieldinputData = { 
          'common_field_value' : jQuery(this).val() 
        }; 
        fieldinputData.id = (jQuery(this).attr('id') != null) ? jQuery(this).attr('id'):""; 
        jQuery.ajax({ 
         'type':'POST', 
         'url': jQuery('#baseurl').val()+'index.php/api/example/content/sc_flat_common_fields_details', 
         'data' : fieldinputData, 
         success : function(response){ 
          console.log(response) 
          jQuery(currentbuton).parents().eq(0).find('.flat_common_loader').hide(); 
          if(fl/ij == "1"){ 
           jQuery(currentbuton).parents().eq(0).find('.update_flat_message').show(); 
           jQuery(currentbuton).parents().eq(0).find('.update_flat_message').fadeOut(3000); 
          } 
         } 

        }); 
        ij++; 
       }); 
      } 


}); 

Answer 1

我认为问题是，你在这里手动绑定一个变化处理程序：

jQuery('#towersetupflats').change(function(){ ... }); 

undelegateEvents只删除绑定到视图的el通过delegateEvents（即从事件事件查看的events）。

你应该结合你所有的事件events：

events : { 
    //... 
    'change #towersetupflats': 'some_function' 
}, 
some_function: function() { 
    this.$('#towerflatsetview').html(''); 
    this.showflatsfortower(this.$('#towersetupflats').val()); 
}