Bootstrap toggle button fires multiple change events

Question

Im having issues getting the Bootstrap togglebutton to work (http://www.bootstraptoggle.com/). Added my toggle button as follows

<input type="checkbox" checked data-toggle="toggle" data-on="Redigér" data-off="Deaktivér" data-onstyle="danger" data-offstyle="primary" id="aktiv_toggle">

The button is used for disabling/enabling all elements inside a fieldset.

When clicking the toggle button i handle the change event as follows:

$(function() {
     $('#aktiv_toggle').change(function() {
         alert("test");
         if ($(this).prop('checked')) {
             $("#aktiver").prop("disabled", true);
         } else {
             $("#aktiver").prop("disabled", false);
         }
     })
 })

Put an alert in there to verify that i get multiple change event (sometimes not always). Can't figure what i have done wrong?

BONUS INFO: It's random how many times the change event is fired. Sometimes only once, other times 2 or 3 times.

UPDATE (Problem has "changed"): The toggle button resides inside a php file which is loaded to my content DIV using AJAX. If i remove my Togglebutton STYLE and SCRIPT import from my php file and put it into HEAD of index alongside the other styles and scripts the togglebutton works fine. But is THAT really necessary, to put all imports of CSS and Scripts inside the HEAD of index. Is it not possible to also load those includes dynamically depending on which page i load into my DIV ?

Answer 1

I used the following, if i find a better solution, I will also add that here:

if($("#zoomCheckBox").is('*')){
    window.zoomToggleoldVal = $('#zoomCheckBox').prop('checked');
    $('#zoomCheckBox').change(function () {
        if (window.zoomToggleoldVal == $('#zoomCheckBox').prop('checked')){
            return;
        } else {
            window.zoomToggleoldVal = $('#zoomCheckBox').prop('checked');
        }
        //execute your code just oance
        console.log('test',window.zoomToggleoldVal);
    });
}