为什么复选框只是忽略 event.namespace，并触发所有绑定的处理程序

Why checkbox just ignoring event.namespace, and fires all the bound handlers

提问人：Sven Zcc 提问时间：8/8/2017 最后编辑：Sven Zcc 更新时间：8/9/2017 访问量：79

问：

jQuery 和方法提供了一种通过指定“event.namespace”在单个元素上绑定和触发多个处理程序的方法，而不会相互干扰。.on().trigger()

但是，我发现命名空间不起作用，它只是触发附加在不同命名空间中的所有绑定处理程序。checkbox

代码非常简单，如下所示：

$('input[type="checkbox"]').on('click.n1',func1).on('click.n2',func2);

$('input[type="checkbox"]').trigger('click.n1');

两者都会被解雇。 相同的代码在其他元素上工作正常。func1func2

是错误吗？还是我错过了复选框？

$("#myCheckbox")
  .on('click.checks1',function(e){console.log('click.checks1 fired, the namespace is: '+e.namespace)})
  .on('click.checks2',function(e){console.log('click.checks2 fired, the namespace is: '+e.namespace)});
$("#myCheckbox").trigger('click.checks1');

$("#myRadio")
  .on('click.radios1',function(e){console.log('click.radios1 fired, the namespace is: '+e.namespace)})
  .on('click.radios2',function(e){console.log('click.radios2 fired, the namespace is: '+e.namespace)});
$("#myRadio").trigger('click.radios1');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='checkbox' id='myCheckbox' />
<input type='radio' id='myRadio' />

JavaScript jQuery 复选框 命名空间

评论

答：

0赞 Stavros Angelis 8/8/2017 #1

您的选择器是错误的。

$('checkbox').on('click.n1',func1).on('click.n2',func2);

应该是

$('input[type="checkbox"]').on('click.n1',func1).on('click.n2',func2);

这里有一个小例子可以使它起作用，尽管我不知道它是否真的会帮助你，因为你没有解释你要做什么。

$('input[type="checkbox"]').on('test.n1',function (e) {
    console.log(e.namespace);
});

$('input[type="radio"]').click(function(e) {
    $('input[type="checkbox"]').trigger('test.n1');
});

因此，在现有代码中，这将在您每次单击单选按钮时触发该复选框。

更多信息，请访问官方 jquery api https://api.jquery.com/event.namespace/

评论

0赞 Sven Zcc 8/8/2017
选择器仅供参考（不过我会修复它），您可以运行下面的代码片段来检查问题
0赞 Sven Zcc 8/9/2017
感谢您的代码，但我没有尝试在复选框和单选按钮之间做任何事情。它们用于说明 event.namespace 如何在不同类型的元素上工作。
0赞 Giorgio Catenacci 8/8/2017 #2

问题就在那里：

$("#checks input") .on('click.checks1',function(){console.log('click.checks1')}) .on('click.checks2',function(){console.log('click.checks2')});

您可以为所有 .因此，每次单击 1 时，都会触发两者。#checks input

可能的重复项：自定义命名空间事件将不起作用

从那里：

它们不是等级制的;只需要匹配一个名称

因此，从本质上讲，“click”事件触发“click”事件，“click.checks1”事件和“click.checks2”事件导致只需要匹配一个名称。

编辑：

正如您在下面的代码片段中看到的，复选框调用事件，然后引发这两个事件。click

相反，Radiobutton 不调用事件，而仅调用具有定义的命名空间的事件。click

此外，您可以看到它也具有复选框的值。e.handleObj.namespace

这似乎是一个错误。

$("#myCheckbox").on('click', function (e) {console.warn('DEFAULT CHECKBOX')});
$("#myRadio").on('click', function (e) {console.warn('DEFAULT RADIO')});


$("#myCheckbox")
  .on('click.checks1',function(e){console.log('click.checks1 fired, the namespace is: '+e.namespace+ ' HandleObj NameSpace '+e.handleObj.namespace )})
  .on('click.checks2',function(e){console.log('click.checks2 fired, the namespace is: '+e.namespace+ ' HandleObj NameSpace '+e.handleObj.namespace)});
$("#myCheckbox").trigger('click.checks1');

$("#myRadio")
  .on('click.radios1',function(e){console.log('click.radios1 fired, the namespace is: '+e.namespace+ ' HandleObj NameSpace '+e.handleObj.namespace)})
  .on('click.radios2',function(e){console.log('click.radios2 fired, the namespace is: '+e.namespace+ ' HandleObj NameSpace '+e.handleObj.namespace)});
$("#myRadio").trigger('click.radios1');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='checkbox' id='myCheckbox' />
<input type='radio' id='myRadio' />

评论

0赞 Sven Zcc 8/9/2017
我在两个不同的命名空间 checks1 和 checks2 中定义了这两个事件，实际上我并没有单击该复选框，而是使用 .trriger（'click.checks1'） 方法来触发附加了命名空间 checks1 的处理程序。问题是，复选框会触发两个处理程序，而单选按钮会按预期仅触发一个处理程序。
0赞 Giorgio Catenacci 8/9/2017
$("#myCheckbox").trigger('click.checks3');也会触发事件。click
0赞 Sven Zcc 8/10/2017
是的，你更清楚地解释了这个问题。似乎命名空间对复选框无效。
0赞 Sven Zcc 8/10/2017
最后我发现会工作，但还有一些其他缺陷。$("#myCheckbox").triggerHandler('click.checks1');

上一个：jQuery 使用多个分隔符按字母顺序排列命名空间

下一个：ajax 回调作为具有命名空间的 PHP 类方法