Javascript 绑定同一类型的多个事件？

首先，可能吗？这件事已经纠缠了好几个小时了；我认为我的事件没有触发的原因是一个事件正在解除绑定/覆盖另一个事件。我想将两个

change

事件绑定到同一个元素。我该怎么做

---

根据请求，以下是我正在努力解决的功能：

(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);

糟糕的是，在我的个人案例中，它是硬编码的。理想情况下，我希望将所有逻辑封装在该函数中。这样我就可以

$('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');

---

我实际上不确定是否可以绑定两个不同的更改事件。但是，为什么不使用逻辑来完成这两个事件呢？例如

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

这样，你就得到了同样的好处。现在，如果您需要做两件不同的事情，您可能需要使用逻辑，以便只发生一件或另一件事情，但我认为您无论如何都必须这样做，即使您可以将两个更改事件绑定到同一元素。

是的，这是可能的

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

---

jQuery事件绑定是加法的，再次调用

。change

不会删除原始事件处理程序。

Ryan正确地认为jQuery是加法的，尽管如果您发现由于链接同一事件而出现问题，美丽的jQuery允许另一种方法，这就是在第一个函数完成后调用第一个函数中的第二个函数，如下所示

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

});

我在示例中包含了第三个“Do thing#3”，以展示另一个事件如何遵循前面描述的两个嵌套函数

---

请原谅之前最初发布的错误伪代码，因为我总是在jQuery中使用ID，因为它们能够为jQuery中的所有内容赋予单独的状态。我在自己的编码中从不使用“input:checkbox”方法，因为这依赖于input语句的“type”属性，因此如果文档中有多个复选框，则需要额外的处理来隔离任何所需的复选框。希望这个例子能够成功地阐明我在这里的评论所没有的内容。

您应该能够在同一个元素上有两个

change

事件（这里有一个测试：）。是否愿意共享您的代码？同意Gert G的说法-将您的代码放在这里可以帮助我们更好地查明您的问题。@Jason：大约值70行，其中包括一些您无法运行的ajax调用（在本地主机上测试）。然而我可以贴出来。我想这是一个简单的测试，我可以自己检查一下……该死。我猜我的虫子在别处了。确保在DOM就绪后附加事件处理程序。以下示例将无法附加事件处理程序：

$（“#myID”）。单击（/*fn*/）；测试

。

..

中脚本标记的内容在浏览器构建页面其余部分之前执行，可以通过如下方式封装代码来修复：

$（document.ready（function（）{$（“#myID”）。单击（/*fn*/）；}）（）

了吗？标记是正确的，“thing#2”永远不会执行。你在这里的坚持只会凸显你的错误。相反，通过设置新的闭包来执行不需要闭包的代码，可以使用更多的资源。同样，这在功能上等同于执行$（'input:checkbox'）.change（function（）{//Do thing#1//Do thing#2.}）@顿悟：在将来，请编辑你原来的帖子，而不是添加新的来表达同样的观点。只是为了澄清，同一个问题上的两个不同答案是可以的，但是如果你只是想澄清或捍卫你现有的答案，请通过编辑或评论来做到。谢谢。@Epiphany-我很抱歉我们对你的回答持否定态度。当然，你发布的第二个例子是正确的，它有助于消除导致我们批评的误解。在试图说明您的观点时，发布完整的可执行代码非常重要，这将允许我们开始讨论该技术是否提供了性能优势，而不是双方简单地重复另一方是错误的。

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

});

$('#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();

  });