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

您的脚本可能有另一部分导致处理程序被分配两次。只需取消在添加新事件处理程序之前可能附加的任何事件处理程序。

（Demo）

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

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

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

请检查。

Answer 4

您是否有相同的元素具有相同的标记，导致onclick事件触发两次？这可能就是原因。你正在用.use_once选择所有元素，这可能是为什么它会两次射击，一次是One Way，一次是Round Trip，如果你想一次一个，我建议使用jQuery选择器$("#use_once")用于您的点击事件。你会得到id的值不同。更具体地说，$("#one_way")，$("#round_trip")，例如。

事件处理程序多次触发

4 个答案: