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

Question

I use the following structure to set out my objects/classes in JavaScript:

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

    // Initialize
    this.initialize();
}

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

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

This allows me to say:

$selectUser = new SelectUser(1);

Outside of the SelectUser object I need to execute some different code (per instance of SelectUser ) each time the value of the hidden field is changed. My first idea was to try:

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

However the alert is not triggered. My next thought was to add an event trigger on my update function/method within the SelectUser object/class. Then I can subscribe to this event per each instance and execute some different code.

How do I do this? I've been using JavaScript for years but I'm fairly new to jQuery and OOP in JavaScript.

Answer 1

.val() doesn't fire the change event since you're changing it programmatically, you can however trigger the event yourself so all the handlers bound for it run. To do that, use .change() , like this:

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

To trigger events you have a few options, .trigger('change') triggers it and bubbles up ( .change() without any arguments is just a shortcut for this). Then there's also .triggerHandler('change') if you just want to trigger event handlers directly on the element but not have it bubble or do the native action....but 99% of the time you're after .trigger('change') or the .change() shortcut.