Question

此代码导致递归行为..

我希望能够单击范围中的文本并选中/取消选中子输入并触发子输入的click事件。

        <span class="RedHover">
            <input type="checkbox" name="chkShowBusn" id="chkShowBusn" tabindex="9" />Business
        </span>



$('.RedHover').click(
        function (e) {
            try {
                $(this).children('input').trigger('click');
                e.stopPropagation();
                e.preventDefault();
                console.log('here');
            } catch (e) {
                //handle no click event.alert
                console.log(e.description);
            }
        }
    );

Answer 1

<input type="checkbox" name="chkShowBusn" id="chkShowBusn" tabindex="9" />
<label for="chkShowBusn">Business</label>

你甚至不需要jQuery ......

Answer 2

问题是，input元素上触发的事件会冒泡并在span上处理。对于原始事件以及以编程方式触发的事件，会发生这种情况。

解决方案可能是检查事件是否来自input元素，如果是，则不处理：

$('.RedHover').click(
    function (e) {
        if (e.target.nodeName.toLowerCase() !== 'input') {
            $(this).children('input').trigger('click');
            e.stopPropagation();
            e.preventDefault();
            console.log('here');
        }
    }
);

try/catch是不必要的，jQuery将确保事件对象始终存在并具有您使用的方法。

根据您的预期行为，对stopPropgation和preventDefault 的调用可能是不必要的。

由于span只有一个孩子，你可以这样做。如果this（处理事件的元素，span）始终与e.target相同（事件源自的元素，span或{ {1}}），您可以继续：

input

请注意，这比检查$('.RedHover').click( function (e) { if (this === e.target) { $(this).children('input').trigger('click'); e.stopPropagation(); e.preventDefault(); console.log('here'); } } );要稳定得多：如果您将来更改HTML，可能会破坏此代码。

Answer 3

您可以点击复选框停止传播

$('input[type=checkbox]').click(function(e){
    e.stopPropagation();
                e.preventDefault();
});

检查此jsfiddle

Answer 4

我遇到了类似的问题，发现这是解决方案。

HTML

ggplot() +
geom_cartogram(data = singapore,
               aes(x = long, y = lat, map_id = id),
               map = singapore) +
geom_path(data = tmp,
          aes(x = long, y = lat, group = token_id,
          color = as.character(token_id)),
          show.legend = FALSE) +
theme_map()

Javascript（扩展到jQuery很容易，我没有包含它，因为它是由@lonesomeday回答的，我总是喜欢Javascript而不是使用另一个库）

<span for="chkCheckbox">
    <input id="chkCheckbox" type="checkbox" />
    <label for="chkCheckbox">My Checkbox Label</label>
</span>

通过这种方式，您可以像使用标签一样使用它。这实际上可以添加到任何类型的元素中。

这是从@lonesomeday

提供的答案扩展而来的

跨度内的复选框onclick of span ..检查输入.. jquery递归问题

4 个答案: