事件处理程序多次触发

Question

我有这种非常奇怪的情况。 我仅将一次点击侦听器附加到一个单选按钮。 但是，当我单击单选按钮时，侦听器功能将触发两次。 我使用jQuery和普通JS事件处理程序都尝试过，这是同样的问题。

 $("#type_oneway").on("click", function(){ alert('clicked button'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" id="type_oneway" name="type" value="One Way" class="use_once" checked style="display:none;"> <label for="type_oneway" style="width:74px;">One Way</label> <input type="radio" id="type_roundtrip" name="type"value="Roundtrip" class="use_once" style="display:none;"> <label for="type_roundtrip" style="width:74px;">Round Trip</label> 

当我运行代码并单击按钮时，会收到两个警报。 我似乎无法弄清楚原因。

Answer 1

脚本的另一部分可能会使处理程序分配两次。 在添加新的事件处理程序之前，只需取消可能附加的任何事件处理程序即可。

（ 演示 ）

$("#type_oneway").off('click').on("click", function(){ alert('clicked button'); });

Answer 2

提供的代码对我而言并非如此。 我也清理过了

 $("input").on("click", function(){ alert('clicked button'); }); 

 .use_once { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" id="type_oneway" name="type" value="One Way" class="use_once" checked> <label for="type_oneway">One Way</label> <input type="radio" id="type_roundtrip" name="type" value="Roundtrip" class="use_once"> <label for="type_roundtrip">Round Trip</label> 

Answer 3

您是否具有带有相同标签的相同元素，这会导致onclick事件触发两次？ 那可能就是原因。 您正在使用.use_once选择所有元素，这可能就是为什么它触发两次，单向触发一次，往返触发一次的原因，如果您想一次触发一次，建议您使用jQuery选择器$("#use_once")点击事件的$("#use_once") 。 您的ID值会有所不同。 更具体地说，例如$("#one_way") ， $("#round_trip") 。

Answer 4

您可能两次编写了以下代码。

$("#type_oneway").on("click", function(){alert('clicked button');});

请检查一下。