bootstrap-switch: it is referred to a pit problem (the same continuous multi-line data state, only the first display buttons, switches other rows not initialized)

First screenshots, line 234 is disabled, but only the second line shows the disable switch, the back of the switch are not initialized

Check the code under:

onLoadSuccess: function (Data) { 
    {# line data acquired status} # 
   the console.log ( 'rendering data after completion of printing all the data' ) 
   the console.log (Data); 

   var Data = $ ( "# the MyTAB") bootstrapTable. ( "the getData" ); 
   the console.log ( 'acquired all the data S%' , data); 

   for ( var I = 0; I <data.length; I ++ ) { 
       the console.log (data [I] .project_code, data [I] .status) 
       IF (Data [I] .status ==. 1 ) { 
           the console.log ( 'this is enabled' ) 
           $ ( '#project_status_switch_on' ) .bootstrapSwitch ({ 
               ontext: "enable",           //Setting ON Text   
               offText: "Disable",     // set OFF text   
               OnColor: "Success", // set the text color ON (info / Success / warning / Danger / Primary)   
               offColor: "Danger",   // set OFF text color ( info / Success / warning / Danger / Primary)   
               size: "Small",     // set control size, from small to large (Mini / Small / Normal / large) 
           }) bootstrapSwitch ( 'State',. to true ) 
       } the else { 
           Console. log ( 'this is disabled' ) 
           $ ( '#project_status_switch_off' ) .bootstrapSwitch ({ 
               ontext: "      Enabled " //Setting ON Text   
               offText: "Disable",     // set OFF text   
               OnColor: "Success", // set the text color ON (info / Success / warning / Danger / Primary)   
               offColor: "Danger",   // set OFF text color ( info / Success / warning / Danger / Primary)   
               size: "Small",     // set control size, from small to large (Mini / Small / Normal / large) 
           }) bootstrapSwitch ( 'State',. to false ) 
       } 
   } 
}

Find the code: $ ( '# project_status_switch_off') bootstrapSwitch (), in accordance id = project_status_switch_off to render, as long as there is this property of the input box should be able to render only ah. F12 no problem under examination is indeed the property value, then why not render it?

Rendering the switch to modify the positioning elements:. $ ( "[Id = 'project_status_switch_off']") bootstrapSwitch ()

 

 Perfect solution.

Subsequent analysis: It may be $ ( '# project_status_switch_off') mode can only find the first matching element, and $ ( "[id = 'project_status_switch_off']") will be all the way qualifying match all elements.