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

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

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

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

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

2 ответа

  1. Я бы разделил логику:

    $('.option').on('change', function() {
       doLotOfStuff();
    });
    
    function doLotOfStuff() {
      // do your stuff here
    }
    
    $(document).ready(function loadPage() {
      doLotOfStuff();
    });
    

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

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

    ФРАГМЕНТ

    /* 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>