jQuery单击标签时点击两次
我正在使用jQuery创build自定义单选button，我有一个问题。 当点击与无线电相关的标签时，点击事件触发两次，如果我只点击收音机本身，它工作正常（实际上它不是我点击的收音机，而是包裹整个input和标签的div）。 这里是代码：
HTML：
<div id="box"> <asp:RadioButtonList ID="RadioButtonList1" runat="server"> <asp:ListItem>RADIO1</asp:ListItem> <asp:ListItem>RADIO2</asp:ListItem> <asp:ListItem>RADIO3</asp:ListItem> </asp:RadioButtonList> </div> jQuery的：
<script type="text/javascript"> $(function () { $('#box').find('input:radio').each(function (i) { var input = $(this); // get the associated label using the input's id var label = $('label[for=' + input.attr('id') + ']'); // wrap the input + label in a div $('<div class="custom-radio"></div>').insertBefore(input).append(label, input); var wrapperDiv = input.parent(); // find all inputs in this set using the shared name attribute var allInputs = $('input[name=' + input.attr('name') + ']'); // necessary for browsers that don't support the :hover pseudo class on labels label.hover( function () { $(this).addClass('hover'); }, function () { $(this).removeClass('hover checkedHover'); }); //bind custom event, trigger it, bind click,focus,blur events wrapperDiv.bind('updateState', function () { if ($(this)[0].children[1].checked) { allInputs.each(function () { var curDiv = $('div > label[for=' + $(this).attr('id') + ']').parent(); curDiv.removeClass('custom-radio-checked'); curDiv.addClass('custom-radio'); }); $(this).toggleClass('custom-radio custom-radio-checked'); } else { $(this).removeClass('custom-radio-checked checkedHover checkedFocus'); } }) .trigger('updateState') .click(function () { console.log('click'); }) .focus(function () { label.addClass('focus'); }).blur(function () { label.removeClass('focus checkedFocus'); }); }); }); </script>
有没有解决这个问题的方法？
尝试添加：
evt.stopPropagation(); evt.preventDefault();
到.bind（）或.click（），无论你看到。 此外，添加参数evt函数，如function(evt) {...
我尝试添加以下解决scheme：
evt.stopPropagation(); evt.preventDefault();
但没有工作。 但是增加这个：
evt.stopImmediatePropagation();
解决了问题！ 🙂
将click事件绑定到input，而不是标签。 当标签被点击时，事件仍然会发生，因为，正如达斯汀所说，点击标签会触发input点击。 这将允许标签保持其正常的function。
$('input').click();
代替
$('label').click();
如果您尝试使用外部容器作为点击元素，则还可以让事件自然冒泡并在您的点击处理程序中testing预期的元素。 如果您尝试为表单创build独特的点击区域，则此scheme非常有用。
<form> <div id="outer"> <label for="mycheckbox">My Checkbox</label> <input type="checkbox" name="mycheckbox" id="mycheckbox" value="on"/> </div> </form> <script> $('#outer').on('click', function(e){ // this fires for #outer, label, and input if (e.target.tagName == 'INPUT'){ // only interested in input console.log(this); } }); </script>
要以简单的方式解决这个问题，请删除标签上的“for”属性。 点击标签也会触发相关元素的点击。 （在你的情况下是发射你的点击事件两次。）
祝你好运
e.preventDefault（）的问题; 是否停止标签单击检查单选button。
更好的解决scheme是简单地添加一个“被检查”的快速检查，如下所示：
$("label").click(function(e){ var rbtn = $(this).find("input"); if(rbtn.is(':checked')){ **All the code you want to have happen on click** } )};
我通常使用这个合成器
.off('click').on('click', function () { console.log('click'); })
代替
.click(function () { console.log('click'); })
我的问题有点不同，因为evt.stopPropagation();evt.preventDefault(); 不适合我，我只是添加return false; 最后，那么它的作品。
$("#addressDiv").on("click", ".goEditAddress", function(event) { alert("halo"); return false; });
尝试把你的input标签放在触发元素之外，因为标签标签模拟点击，所以你将总是有多个调用。
只是想在这里，我在WordPress WooCommerce中使用WooCombinator，它使用的链接看起来像button变化select，而不是默认的变化下拉select器。 我想执行一些特定的变种JQuery代码被选中，许多答案在这里并没有停止冒泡的效果。
Yoshyosh的评论，试图使用鼠标，而不是点击作品像魅力，我不能相信我没有想到它！ 谢谢yoshyosh！
