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

Question

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

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

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

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

func1和func2都将被解雇。 相同的代码在其他元素上工作正常。

这是一个错误吗？还是我错过了复选框的内容？

$("#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' />

Answer 1

问题就在那里：

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

您可以为所有#checks input定义这两个事件。因此，每次单击1时，两者都会被触发。

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

从那里：

它们不是分层的;只需要匹配一个名称

所以本质上"click"事件触发"click"事件，"click.checks1"事件和"click.checks2"事件导致只有一个名称需要匹配。

编辑：

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

改为单选按钮不调用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' />

Answer 2

您的选择器错误。

$('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/