有没有一种方法可以在不使用全局变量的情况下打破 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);
});

您可以在这里尝试。这样做的作用是事件处理程序回调不仅接收 事件 object 以及您传入的任何其他参数，在本例中我们只使用一个简单的 false 和一个 !=== 检查这一点很重要，因此 undefined （根本没有传递参数）仍然会更改两个控件。因此，例如 $("#control").change() 会更改两个控件，但仍然不循环...您可以在此处进行测试。