2017-01-30 6 views
0

Ich finde mein selbst mit einem wirklich seltsamen Verhalten mit jQuery steps und bootstrap toggle. Ich weiß wirklich nicht, ob es eine Verbindung zwischen beiden gibt, aber ich weiß, dass es mindestens viele CSS-Probleme gibt, wenn Sie jQuery Plugins/Erweiterungen innerhalb jQuery steps verwenden.Weird Verhalten mit bootstrap toggle

Ich lade Inhalt pro ajax und verwenden partial views@Html.Render()

Mein Problem mit: Wenn ich meine nicht html markup meine togglesajax mit enthält laden, aber den Code für toggle inputs directy in der (Teil-) Ansicht toggles gewonnen platzieren arbeite nicht. Sie werden korrekt angezeigt, reagieren aber auf keine Eingabe.

Wenn ich ajax verwende, wird toggles nicht korrekt angezeigt, ohne dass die Initialisierung per javaScript erfolgt. Wenn dies der Fall ist, funktionieren sie, aber ich möchte meinen Inhalt nicht immer mit ajax laden. Hier

ist der Code für die partial view:

<div class="form-horizontal"> 
    <div class="form-group"> 
     <div class="col-md-2"> 
     </div> 
     <div class="col-md-6"> 
      <div class="checkbox"> 
       <label> 
        <input id="course" data-toggle="toggle" name="Rate.OfferingRates" type="checkbox" > 
       </label> 
      </div> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div id="offeringRateContainerSubscription"> 
      <div class="col-md-2"> 
      </div> 
      <div class="col-md-6"> 
       <div class="checkbox disabled"> 
        <label> 
         <input id="subscription" disabled data-toggle="toggle" name="Rate.OfferingRates" type="checkbox" value="@SlRateBaseTypes.Subscription"> 
        </label> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

<script> 
    $(function() { 
     // reached 2 times using @Html.Render() 
     debugger; 
     $('#course').bootstrapToggle({ 
      on: 'Ja', 
      off: 'Nein' 
     }); 

     $('#subscription').bootstrapToggle({ 
      on: 'Ja', 
      off: 'Nein' 
     }); 

     $('#course').change(function() { 
      debugger; 
      var isCourse = $('#course').filter(":checked"); 
      if (isCourse.length) { 
       $('#subscription').bootstrapToggle('enable'); 
       $('#subscription').parent().parent().parent().removeClass('disabled'); 
      } else { 
       $('#subscription').bootstrapToggle('off'); 
       $('#subscription').bootstrapToggle('disable'); 
       $('#subscription').parent().parent().parent().addClass('disabled'); 
      } 
     }); 
    }); 
</script> 

Außerdem: ich eine debugger Marke in der javaScript in dieser partial viewMyPartialView platziert die toggles

Die debugger Marke bricht zwei Mal initialisiert, wenn Laden per ajax. Ich habe keine Ahnung, wie das möglich ist. Ich weiß nicht, ob das auch ein Problem ist.

Antwort