跨度内的复选框on跨度onclick ..检查输入.. jQuery递归问题

如何解决跨度内的复选框on跨度onclick ..检查输入.. jQuery递归问题

|| 此代码导致递归行为。我希望能够单击范围中的文本并选中/取消选中子输入并触发子输入的click事件。 http://jsfiddle.net/cwfontan/ALEBr/

        <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);
            }
        }
    );

解决方法

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

而且您甚至不需要jQuery ... , 问题是在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\');
        }
    }
);

“ 6”是不必要的，jQuery将确保事件对象始终存在并具有您使用的方法。视您的预期行为而定，stopPropgation和preventDefault的呼叫可能是不必要的。由于span只有一个孩子，因此您可以采用另一种方法。如果this（处理事件的元素，总是span）与e.target（事件起源的元素，span或input）相同，则可以继续：

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

请注意，这比检查ѭ16不稳定得多：如果将来更改HTML，则可能会破坏此代码。 , 您可以像这样单击复选框来停止传播

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

检查这个jsfiddle , 我有一个类似的问题，发现这是解决方案。的HTML

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

Javascript（扩展为jQuery很容易，因为@lonesomeday已回答，所以不包含它，而且我总是更喜欢Javascript而不是使用其他库）

var checkboxSpans = document.querySelectorAll(\"span[for]\");

for (var i = 0; i < checkboxSpans.length; i++) {
    var forCheckbox = checkboxSpans[i].getAttribute(\"for\");
    forCheckbox = document.getElementById(forCheckbox);

    if (forCheckbox != null) {
        checkboxSpans[i].onclick = function (chk) {
            return function (e) {
                if (this === e.target) {
                    e.stopPropagation();
                    e.preventDefault();
                    if (chk.checked != true) {
                        chk.checked = true;
                    } else {
                        chk.checked = false;
                    }
                }
            }
        }(forCheckbox);
    }
}

这样，您可以像使用标签一样使用它。实际上，可以将其添加到任何类型的元素中。扩展了@lonesomeday提供的答案