JQuery 单击标签时触发两次

我使用 jQuery 来创建自定义单选按钮，我遇到了一个问题。 当点击与收音机相关联的标签时，单击事件会触发两次，如果我只点击收音机本身，它就工作得很好(实际上，我点击的不是收音机，而是包装整个输入和标签的 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>

对这种行为有什么解决办法吗？

108742 次浏览
小开
最佳答案

试着补充一下:

evt.stopPropagation();
evt.preventDefault();

也可以将参数 evt添加到函数中，比如 function(evt) {...

小开

为了简单地解决这个问题，删除标签上的“ for”属性。点击标签也会触发对相关元素的点击。(在您的情况下，这将触发两次单击事件。)

祝你好运

小开

将 click 事件绑定到输入而不是标签。当点击标签时-事件仍然会发生，因为正如 Dustin 提到的，点击标签会触发点击输入。这将允许标签保持其正常功能。

$('input').click();

而不是

$('label').click();
小开

E.proventDefault () ; 的问题在于它阻止了标签单击检查单选按钮。

一个更好的解决方案是像下面这样简单地添加一个“已检查”快速检查:

$("label").click(function(e){
var rbtn = $(this).find("input");
if(rbtn.is(':checked')){
**All the code you want to have happen on click**
}
)};
小开

如果您试图使用外部容器作为 click 元素，那么您也可以让事件自然冒泡，并在您的 click 处理程序中测试预期的元素。如果您试图为窗体设置独特的单击区域的样式，则此场景非常有用。

<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>
小开

我尝试添加上述解决方案，添加:

evt.stopPropagation();
evt.preventDefault();

但是没有成功。但是加上这个:

evt.stopImmediatePropagation();

解决了问题! :)

小开

我通常用这种合成语法

.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;
});
小开

在我的情况下，问题是我 在函数中具有 click 事件和 函数执行了两次... 。函数的每次执行都会创建一个新的 click 事件。- 手掌-

在将 click 事件移到函数之外之后，一切正常! :)

小开

最佳答案隐藏在评论中:

即使在单选按钮上也应该绑定到 change，因为 标签的文本是可点击的——他们并不总是点击收音机 按钮本身。 -Chovy12月12’13在1:45

这个 小提琴说明了所有其他解决方案—— stopPropagation、 stopImmediatePropagation、 preventDefault、 return false——要么什么都不改变，要么破坏复选框/无线电功能)。它还说明了这是一个普通的 JavaScript 问题，而不是 jQuery 问题。

编辑: 我刚刚发现的另一个工作解决方案是将 onclick绑定到输入而不是标签。更新小提琴.

小开

我遇到了同样的问题，因为我将单选内容嵌套在标签中，并将处理程序附加到 radio _ div。移除嵌套标签修复了这个问题。

<div id="radio_div">
<label>
<input type="radio" class="community_radio" name="community_radio" value="existing">
Add To Existing Community
</label>
</div>
小开

我试过加入溶液。

evt.stopPropagation();
evt.preventDefault();

但没成功。

加上

evt.stopImmediatePropagation();

解决了问题! :)

小开

标签触发要选中的单选框/复选框。

if ($(event.target).is('label')){
event.preventDefault();
}

它特别防止标签触发这种行为。

小开

单击带有 For = “ some-id”属性的标签会触发一个新的单击，但是只有当目标存在并且是一个输入时才会触发。我是 没有能够完美地解决这个问题，例如使用 e.Prevention Default ()或类似的东西，所以我是这样做的:

例如，如果您具有此结构并希望在单击.some-class 时发生事件

<div class="some-class">
<input type=checkbox" id="the-input-id" />
<label for="the-input-id">Label</label>
</div>

起作用的是:

$(document)
.on('click', '.some-class', function(e) {
if(
$(e.target).is('label[for]')
&&
$('input#' + $(e.target).attr('for')).length
) {
// This will trigger a new click so we are out of here
return;
}


// else do your thing here, it will not get called twice
})
;
小开 
$(document).on('click','.class',function() {
alert('abc')
})

在我的例子中，它被触发了2次，因为我包含了这个代码2次 两次 assets/js/test.js。

小开

是的，通过加上, Https://www.w3schools.com/jsref/event_stopimmediatepropagation.asp

E.stop 立即传播() ; <-此停止多次火灾 something

$(document).on("click",".SaveGSTPayableAndRefund",function(e){
e.stopImmediatePropagation();
})

谢谢:)


提交答案