JQuery / JavaScript добавление событий в ООП

Question

Я использую следующую структуру для установки моих объектов / классов в JavaScript:

SelectUser = function(instanceID) {
    this._instanceID = instanceID;

    // Initialize
    this.initialize();
}

SelectUser.prototype = {
    initialize: function () {
        ...
    },

    update(userID) {
        $('#hidden-field-' + this._instanceID).val(userID);
    }
}

Это позволяет мне сказать:

$selectUser = new SelectUser(1);

За пределами SelectUser объекта Iнеобходимо выполнять какой-то другой код (для каждого экземпляра SelectUser) каждый раз, когда изменяется значение скрытого поля.Моей первой идеей было попытаться:

<script type="text/javascript">
    $(document).ready(function () {
        $selectUser = new SelectUser(1);
        $selectUser2 = new SelectUser(2);

        $('#hidden-field-1').change(function () {
            alert('Something');
        });

        $('#hidden-field-2').change(function () {
            alert('Something else');
        });
    });
</script>

Однако предупреждение не сработало.Моей следующей мыслью было добавить триггер события в мою функцию / метод обновления в объекте / классе SelectUser.Затем я могу подписаться на это событие для каждого экземпляра и выполнить какой-то другой код.

Как мне это сделать?Я использую JavaScript в течение многих лет, но я довольно плохо знаком с jQuery и ООП в JavaScript.

Answer 1

.val() не запускает событие change, так как вы изменяете его программно, однако вы можете инициировать событие самостоятельно, чтобы все обработчики, связанные с ним, запускались. Для этого используйте .change(), например:

$('#hidden-field-' + this._instanceID).val(userID).change();

Для запуска событий у вас есть несколько опций, .trigger('change') запускает его и всплывает (.change() без каких-либо аргументов - просто ярлык для этот). Кроме того, есть .triggerHandler('change'), если вы просто хотите запускать обработчики событий напрямую на элементе, но не иметь пузыря или выполнять собственные действия .... но в 99% случаев Вы после .trigger('change') или .change() ярлык.