Флажок внутри span onclick of span .. проверить входные данные .. проблема рекурсии jquery

Question

Этот код вызывает рекурсивное поведение.

Я хочу иметь возможность щелкать текст в диапазоне, отмечать / снимать флажок дочернего ввода и запускать событие 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);
            }
        }
    );

Answer 1

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

И вам даже не нужен jQuery ...

Answer 2

У меня была похожая проблема, и я нашел ее решением.

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

Answer 3

Вы можете остановить распространение в щелчке флажка, например,

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

отметьте это jsfiddle

Answer 4

Проблема в том, что событие, инициируемое на элементе 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, либо input), вы можете продолжить:

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

Обратите внимание, что это гораздо менее стабильно, чем проверка nodeName: если вы измените свой HTML в будущем, он может сломать этот код.