Bootstrap modal "shown.bs.modal" ne modifie pas ma case à cocher dans le modal

Question

J'ai des cases à cocher qui doivent être chargées lors du chargement de ma page. Il regardera à partir du dictionnaire fourni à partir du DjangoTemplate et vérifier certaines cases à cocher.

J'ai essayé d'utiliser "shown.bs.modal" il exécute les codes, mais plus tard, je trouve que mes cases à cocher sont remises à sa valeur par défaut vérifié non.

J'ai découvert que l'utilisation de setInterval() pour définir les cases à cocher fonctionne comme je le souhaite. Il semble qu'après les charges modales, il faut 1 à 2 secondes avant que les cases à cocher ne soient vérifiées. Donc, quelque chose se passe définitivement après "shown.bs.modal" qui réinitialise mes cases à cocher à non-cochée.

Ma solution jusqu'à présent est d'utiliser setTimeout() après "shown.bs.modal" pour vérifier les cases à cocher. Mais je me demande toujours quelle est la cause.

/* 
Used to detect if modal page button is triggered or not. These codes does 
not set the check boxes checked. 
*/ 
$("#sample").on("shown.bs.modal", function(event) { 
    for (var i = 0; i < index_checkbox.length; i ++) { 
    console.log("something is actually happened here"); 
    $("#checkbox-" + index_checkbox).prop("checked", true); 
    console.log("the value of `prop('checked')` is changed"); 
    console.log("but later it goes back to `false`"); 
    } 
}).modal("show"); 

// These codes checked the check boxes after 1 - 2 seconds. 
window.setInterval(function() { 
    for (var i = 0; i < index_checkbox.length; i ++) { 
    $("#checkbox-" + index_checkbox).prop("checked", true); 
    } 
}, 1000); 

// The checkbox generated from DjangoTemplate. 
<input id="checkbox-{{ teacher.id }}" type="checkbox" name="teacher" 
    value="{{ teacher.id }}" 
    ng-model="teacher_checkbox[{{ forloop.counter0 }}]" /> 

EDIT: En fait, le réglage de la setInterval()-100 milliseconde fonctionne également. Mais si possible, je ne veux pas utiliser setInterval().

EDIT: L'intervalle de 0 fonctionne également. Je suis confus ....

Answer 1

Vous devez envelopper tout événement bootstrap, comme 'shown.bs.whatever' soit dans un

$(document).ready(function() 

}); 

ou

$(function(){ 

});