Как запустить функцию изменения при загрузке страницы?

Question

На странице «создать», у меня есть много вещей происходят с флажками, когда один из них либо зарегистрированных или незарегистрированных, используя ...

$('.option').on('change', function() { 
//lots of stuff 
}); 

У меня есть эти галочки на «редактировать» страницы как так что, когда страница «edit» загружается, она устанавливает все флажки правильно (отметьте или не отмечена), но также есть некоторые математические вычисления, сделанные onchange, которые мне нужно сделать при загрузке страницы. Другими словами, чтобы отображаемые числа были правильными, когда первая страница редактирования была открыта, мне нужно выполнить функцию «изменить» выше для запуска загрузки страницы.

Является ли это выполнимым? В принципе, это нужно, чтобы он запускался при загрузке страницы, а затем снова всякий раз, когда происходит фактическое «изменение» (как первоначально предполагалось).

Answer 1

Я бы отделить логику:

$('.option').on('change', function() { 
    doLotOfStuff(); 
}); 

function doLotOfStuff() { 
    // do your stuff here 
} 

$(document).ready(function loadPage() { 
    doLotOfStuff(); 
}); 

Это позволяет даже extend логику (если требуется), и использовать его, передавая различные Params на каждом конкретном случае (опять же, если это требуется).

Answer 2

Оберните свой //lots of stuff в функцию. При событии ready используйте метод one() для звонка //lots of stuff только один раз. В этом фрагменте я создал функцию, называемую process(), и она вызывается только один раз, когда DOM - ready и вызывается в любое время, когда флажок находится под change.

SNIPPET

/* When document is ready call on... 
 
|...process() only once. 
 
*/ 
 
$(document).one('ready', process); 
 

 
// Any change on any checkbox call process() 
 
$('.chx').on('change', process); 
 

 
function process(e) { 
 
    var total = 0; 
 
    $(".chx:checked").each(function() { 
 
    total += parseInt($(this).val(), 10); 
 
    }); 
 
    $('#total').val(total); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<fieldset> 
 
    <label>1 
 
    <input class='chx' type='checkbox' value='1'> 
 
    </label> 
 
    <label>2 
 
    <input class='chx' type='checkbox' value='2'> 
 
    </label> 
 
    <label>3 
 
    <input class='chx' type='checkbox' value='3'> 
 
    </label> 
 
    <label>4 
 
    <input class='chx' type='checkbox' value='4' checked> 
 
    </label> 
 
    <label>5 
 
    <input class='chx' type='checkbox' value='5'> 
 
    </label> 
 
    <label>6 
 
    <input class='chx' type='checkbox' value='6'> 
 
    </label> 
 
    <label>7 
 
    <input class='chx' type='checkbox' value='7' checked> 
 
    </label> 
 
    <label>8 
 
    <input class='chx' type='checkbox' value='8'> 
 
    </label> 
 
    <label>9 
 
    <input class='chx' type='checkbox' value='9'> 
 
    </label> 
 
    <label>10 
 
    <input class='chx' type='checkbox' value='10' checked> 
 
    </label> 
 
</fieldset> 
 
<label for='total'>Total: 
 
    <output id='total'></output> 
 
</label>