jQuery选择器可否定父元素中的特定HTML元素

Question

我有一个由JQuery multiselect下拉库生成的HTML标签结构，如下所示：

<label for="ui-multiselect-selectedSku-option-1"><input id="ui-multiselect-dropdown-option-1" type="radio" value="DropDownVal1"><span>DropDownText1</span></label>
<label for="ui-multiselect-selectedSku-option-2"><input id="ui-multiselect-dropdown-option-2" type="radio" value="DropDownVal2"><span>DropDownText2</span></label>

我的要求是：除了input元素外，只要用户在

<label></label>

（包括标签）区域，我需要执行event.preventDefault() 。 我尝试过

 $(document).on('click', 'label[for^="ui-multiselect-selectedSku-option-"]',function(event){
    event.preventDefault();
});

但是即使我也单击标签内的<input> ，上述处理程序也会被触发（这很明显，我知道！）

如何编写用于过滤此内容的JQuery选择器。

Answer 1

最好的办法是将输入内容从标签中删除...但是：

我无法控制此标记结构...（您对另一个答案的评论）

您可以在<input>元素上使用.stopImmediatePropagation() 。因此，click事件不会冒泡到标签上。

参见下文...尝试单击标签，然后在收音机上。

 $(document).on('click', 'label[for^="ui-multiselect-selectedSku-option-"]',function(event){ console.log("Clicked on a label"); event.preventDefault(); // Don't know if that is useful... }); $(document).on('click', 'label[for^="ui-multiselect-selectedSku-option-"] input',function(event){ console.log("Clicked on a radio input"); event.stopImmediatePropagation(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label for="ui-multiselect-selectedSku-option-1"><input id="ui-multiselect-dropdown-option-1" type="radio" value="DropDownVal1"><span>DropDownText1</span></label> <label for="ui-multiselect-selectedSku-option-2"><input id="ui-multiselect-dropdown-option-2" type="radio" value="DropDownVal2"><span>DropDownText2</span></label> 

Answer 2

第一个问题是您的标签。 通常，您应该将输入内容包含在标签内，或者使用for属性。 您的for属性用于与标签内的控件不同的控件。 我不确定浏览器将如何处理。

如果您不想单击标签来触发输入，请不要将它们关联起来。 考虑根本不使用标签，而应使用跨度。

如果存在打开/关闭标签是否影响控件的条件，则可以使用代码设置/清除标签的for属性。