jQuery/JavaScript在OOP中添加事件触发器

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对象之外，每次更改隐藏字段的值时，我都需要执行一些不同的代码(每个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很多年了，但我对JavaScript中的jQuery和OOP还是相当陌生的。

Answer 1

.val()不会触发change事件，因为您是以编程方式更改它的，但是您可以自己触发该事件，以便运行所有绑定到它的处理程序。为此，请使用.change()，如下所示：

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

要触发事件，您有几个选择，.trigger('change')触发它并冒泡(不带任何参数的.change()只是一个快捷方式)。如果您只想直接在元素上触发事件处理程序，而不想让它冒泡，或者在99%的时间里使用.trigger('change')或.change()快捷方式执行原生action....but，那么还有.triggerHandler('change')。