Binding multiple events of the same type?

Question

First, is this possible? Fighting this watch; I think the reason my events do not shoot is because one event is disabling / rewriting another. I want to associate two events changewith the same element. How can i do this?

---

As requested, here is the function I am struggling with:

(function($) {
    $.fn.cascade = function(name, trigger, url) {
    var cache = {};
    var queue = {};

        this.each(function() {
            var $input = $(this);
            var $trigger = $input.closest('tr').prev('tr').find(trigger);

            //$input.hide();

            var addOptions = function($select, options) {
                $select.append('<option value="">- Select -</option>');
                for(var i in options) {
                    $select.append('<option value="{0}">{1}</option>'.format(options[i][0], options[i][1]));
                }
                $select.val($input.val()).trigger('change');
            }

            var $select = $('<select>')
                // copy classes
                .attr('class', $input.attr('class'))
                // update hidden input
                .bind('change', function() {
                    $input.val($(this).val());
                })
                // save data for chaining
                .data('name', name)
                .data('trigger', $trigger);

            $input.after($select);

            $trigger.bind('change', function() {
                var value = $(this).val();

                $select.empty();

                if(value == '' || value == null) {
                    $select.trigger('change');
                    return;
                }

                // TODO: cache should be a jagged multi-dimensional array for nested triggers
                if(value in cache) {
                    addOptions($select, cache[value]);
                } else if(value in queue) {
                    $select.addClass('loading');
                    queue[value].push($select);
                } else {
                    var getDict = {}
                    getDict[name] = value;
                    // TODO: use recursion to chain up more than one level of triggers
                    if($(this).data('trigger')) {
                        getDict[$(this).data('name')] = $(this).data('trigger').val();
                    }
                    $select.addClass('loading');
                    queue[value] = [$select];
                    $.getJSON(url, getDict, function(options) {
                        cache[value] = options;
                        while(queue[value].length > 0) {
                            var $select = queue[value].pop();
                            $select.removeClass('loading');
                            addOptions($select, options);
                        }
                    });
                }
            }).trigger('change');
        });

        return this;
    }
})(jQuery);

The corresponding HTML snippet is even longer ... but essentially it is a selection box with a bunch of years, and then <input>, which (apparently) is replaced by <select>, showing what the car is doing for this year, and then another <input>, which is replaced with models for make / year.

Actually, it seems to work pretty well, except for loading on the page. The initial values ​​are erased.

---

, $select.bind() :

$('select.province').live('change', function() { 
    $(this).siblings('input.province').val($(this).val()); 
});
$('select.make').live('change', function() { 
    $(this).siblings('input.make').val($(this).val()); 
});
$('select.model').live('change', function() { 
    $(this).siblings('input.model').val($(this).val()); 
});

, . .

$('input.province').cascade('country', 'select.country', '/get-provinces.json');
$('input.make').cascade('year', 'select.year', '/get-makes.json');
$('input.model').cascade('make', 'select.make', '/get-models.json');

Answer 1

, .

$(…).change(function () { /* fn1 */ })
    .change(function () { /* fn2 */ });

jQuery , .change .

Answer 2

Ryan jQuery, , , , , , jQuery , , .

$('input:checkbox').change(function() {
  // Do thing #1.;  <-- don't forget your semi-colon here
  (function() {
     // Do thing #2.
  });

});

, , .

:

... , , . , , . . 1000 .

, , , . , , , (. UNCHECKING) , .

$('#thecheckbox').change(function() { 

      $("#doOne").fadeIn();

      if ($('#thecheckbox').attr('checked')) { doFunc2() }
      else { doFunc3() };

      function doFunc2() { $("#doTwo").fadeIn(); return true; }
      function doFunc3() { $("#doTwo").fadeOut(); return true; }

      $("#doThree").fadeIn();

  });

"Do thing # 3" , , , .

, , ID jQuery - jQuery. "input: checkbox" , "type" , , , , , .

Answer 3

, . ? ...

$('input:checkbox').change(function() {
  // Do thing #1.
  // Do thing #2.
});

Thus, you get the same benefit. Now, if you need to do two different things, you may need to use logic so that only one or the other thing happens, but I think that you still have to do this, even if you can associate two change events with the same element.