Question

我有一个由JQuery多选下拉列表库生成的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>

我的要求是：输入元素除外，只要用户单击

中的其他任何位置

<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属性用于与标签内的控件不同的控件。我不确定浏览器将如何处理。

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

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

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

2 个答案: