Question

首先，有可能吗？几个小时一直在努力奋斗这个;我认为我的事件没有解雇的原因是因为一个事件解除绑定/覆盖另一个事件。我想将两个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);

HTML的相关部分甚至更长......但实质上它是一个带有一堆年份的选择框，然后<input>被<select>替换为显示车辆的<input>使那一年，然后另一个$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');

尽管如此，我觉得它在那里是硬编码的。理想情况下，我想在该函数中封装所有逻辑。所以我可以拥有

{{1}}

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

Nested Functions on One Event Trigger

此示例显示了如何将三个函数绑定到一个更改事件，以及如何独立控制第二个和第三个函数，即使它们仍由父更改事件触发。这也显示了如何以编程方式将第二个和第三个函数绑定到同一个父函数触发器中，然后以嵌套在其中的父函数的形式或独立响应（通过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”，以显示另一个事件如何跟随前面描述的两个嵌套函数。

原谅最初发布的早期坏伪代码，因为我总是在我的jQuery中使用ID，因为它们能够通过jQuery为所有内容提供个人状态。我从不在自己的编码中使用'input：checkbox'方法，因为这依赖于输入语句的'type'属性，因此如果文档中有多个复选框，则需要额外的处理来隔离任何所需的复选框。希望这个例子能成功地阐明我的评论没有。

Answer 3

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

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

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

绑定相同类型的多个事件？

3 个答案: