Как повесить событие на select class="form-control select2"?

Question

[BuBux]

<div class="form-group col-md-6" style="overflow:hidden; padding-left: 0px;">
    <label for="field-1" class="control-label">Направление</label>
                                            
    <?php if (is_array($directions)): ?>
        <select id="direction" class="form-control select2" name="direction[]" style="width: 100%;" multiple>
            <?php foreach ($directions as $direction): ?>
                <option value="<?=$direction['ID']?>">
                    <?php echo $direction['NAME']; ?>
                </option>
            <?php endforeach; ?>
        </select>
    <?php endif; ?>
</div>

Как можно повесить событие change? И желательно чтобы обращение было по id.
Пробовал так:

$(document).on('change', '#direction', function () {
    console.log('yes');
});

Но ничего не получается. Дочитал до того, что с select2 необходимо по другому обращаться, но так и не нашёл как именно.