events - 有没有一种方法可以在不使用全局变量的情况下打破 jQuery 中的事件递归？

Question

我有一个带有 2 个文本输入和 2 个跨度控件的表单。通常，当文本框 A 更改时，会触发事件来更改范围 A，而当文本框 B 更改时，会触发事件来更改范围 B。

但是，在一种特殊情况下，我希望更改文本框 A 或文本框 B 以更新范围 A 和 B。在这种情况下，我尝试将事件连接到相应的控件，但它不起作用，因为有是在事件构建代码中设置的很多状态(更不用说每个事件都调用“this”，如果它是从与预期不同的控件触发的，这将使逻辑使用错误的控件)。

为了使事情变得简单，最好在创建事件处理程序时将一个字符串(代表另一个文本输入 ID)传递给事件处理程序，然后在第二个控件上手动调用 change() 事件。然而，这会使事情陷入无限递归循环。我想到了一种绕过递归的方法，但它需要一个全局变量。

有没有比这更好的方法，最好是不需要全局变量的方法？

ml_inEvent = false;



   $ctlToVal.bind('keyup change', {feedbackCtl: ml_feedback, controlsToMonitor: ary, validationGroup: this.validationGroup, controlToFire: ctlToFire}, function(event) {
        // Other processing happens here...

        if (event.data.controlToFire != '') {
            var $controlToFire = $('#' + event.data.controlToFire);
            if ($controlToFire.length) {
                // Use a global variable to ensure this event is not fired again
                // as a result of calling the other one
                if (!ml_inEvent) {
                    ml_inEvent = true;
                    $controlToFire.change();
                    ml_inEvent = false;
                }
            }
        }
    });

Answer 1

您可以在 .trigger() 上使用 extraParameters 参数突破，例如:

$ctlToVal.bind('keyup change', {feedbackCtl: ml_feedback, controlsToMonitor: ary, validationGroup: this.validationGroup, controlToFire: ctlToFire}, function(event, fire) {
  // Other processing happens here...
  if(fire !== false)  $('#' + event.data.controlToFire).trigger('change', false);
});

You can give it a try here 。这样做的作用是事件处理程序回调不仅接收 event object还有您传入的任何其他参数，在本例中我们只是使用一个简单的false和一个!===检查它重要的是，未定义(根本没有传递参数)仍然会更改两个控件。因此，例如 $("#control").change() 会更改两个控件，但仍然不循环... you can test that here .