Событие Click родительского элемента jQuery - PullRequest
Новая
       28

Событие Click родительского элемента jQuery

1 голос
/ 12 февраля 2012

Мой HTML выглядит примерно так (к сожалению, он не может измениться, потому что он отображается с используемой CMS): 

<li>
<input id="cb1" type="checkbox">
<label for="cb1">
<div>Some Other Content</div>
<div class="pledge">Click to Pledge</div>
</label>
</li>

JQuery. 

$("div.pledge").click(function() {

  var checkboxlabel = $(this).parent("label");

  $("input[for=checkboxlabel]").attr('checked', !$checkbox.attr('checked'));

});

Использование этогоКод переключит флажок, если я щелкну в любом месте внутри метки.Мне нужно, чтобы действие происходило только при нажатии на элемент <div class="pledge">.Я подозреваю, что .stopPropagation ();поможет мне здесь, но я не смог заставить его работать должным образом.

Вот еще один выстрел, который, кажется, выполняет ту же мысль: 

$("div.pledge").click(function() {

  $("input[for=' + this.parent("label").attr("id") + ']").attr('checked', !$checkbox.attr('checked'));

});

Ответы [ 5 ]

4 голосов
/ 12 февраля 2012

Читая между строк, мне кажется, что следующее даст желаемый результат без JS: 

<li>
<input id="cb1" type="checkbox">
<div>
<div>Some Other Content</div>
<label for="cb1">Click to Pledge</label>
</div>
</li>

http://jsfiddle.net/nnnnnn/VqmBb/

Это отображает «Некоторое другое содержимое» и «Click to Pledge» рядом с флажком, но, как вы можете видеть из моей демонстрации, только часть «Click to Pledge» ставит / снимает флажок при нажатии.

Я поменял вашу метку и div "pledge" и использовал атрибут for метки, чтобы связать его с флажком, чтобы он автоматически проверял / снимал флажок. (Хотя теперь внешний div на самом деле ничего не делает и может быть удален, если вам это не нужно для стилизации.)

Что касается вашего JS, в следующей строке есть некоторые проблемы: 

$("input[for=checkboxlabel]").attr('checked', !$checkbox.attr('checked'));

Во-первых, ваш селектор "input[for=checkboxlabel]", похоже, пытается использовать переменную checkboxlabel, объявленную в строке ранее, но на самом деле вы просто включили строку, в которую входит текст "checkboxlabel". Так что это не выберет никаких элементов в вашем html, потому что у вас нет элемента «input» с атрибутом «for», равным строке «checkboxlabel». Также у вас есть переменная $checkbox, которая нигде не определена.

ОБНОВЛЕНИЕ: ОК, следующее должно работать для вашего обновленного HTML (это работало для меня). Проблема с вашим существующим JS-кодом, за исключением того факта, что вы пытаетесь использовать переменную $checkbox, которая не объявлена, заключается в том, что вы пытаетесь привязать свой обработчик кликов к элементу "pledge", что означает, что вы ничего не сделал для обработки кликов на других частях этикетки. Учитывая, что вы специально хотите прекратить клики на других частях ярлыка, я бы посоветовал вам присоединить обработчик .click() к ярлыку - щелчки на дочерних элементах ярлыка будут пузыриться до обработчика щелчков ярлыка, так что тогда вы можете проверить, был ли элемент, по которому щелкнули, тот, у которого был класс "залог". Если нет, верните false, чтобы отменить поведение по умолчанию для клика по метке, но если оно равно , элемент "pledge" ничего не делает и допускает выполнение по умолчанию: 

$("div.pledge").parent("label").click(function(e) {
    if (!$(e.target).hasClass("pledge"))
        return false;
});

(Обратите внимание, что я выбираю родителя для "div.pledge", а не просто говорю $("label").click(), чтобы эта обработка не привязывалась к всем меткам.)

Если вам не нравится это, я думаю, что ответ mgibsonbr - хорошая альтернатива.

1 голос
/ 12 февраля 2012

Если я правильно понял, когда вы говорите «вы не можете изменить HTML», вы имеете в виду только тот HTML, который генерируется сервером, верно?Но можете ли вы изменить его на стороне клиента, используя JavaScript? 

jQuery(document).ready(function($) {
    $('label[for="cb1"]').removeAttr("for");
    $("div.pledge").click(function() {
        $(this).parent().prev().attr("checked", function(index,oldValue) {
            return !oldValue;
        });
    });
});

Таким образом, метка больше не будет иметь for, а щелчок div обрабатывается вручную.

0 голосов
/ 12 февраля 2012

Переместить флажок внутри элемента метки. Вам не нужны никакие js и даже id или атрибут не требуются для элементов input и label. Попробуйте это. 

<label>
    <input type="checkbox" />
    <div>Some Other Content</div>
    <div class="pledge">Click to Pledge</div>
</label>

Демо

0 голосов
/ 12 февраля 2012

Вы идете по этому пути неправильно - вам нужно указать атрибут 'for' в вашем ярлыке и установить его в качестве идентификатора флажка, которому вы его присваиваете так: 

<label for="checkbox_id">Label-text</label>
<input type="checkbox" id="checkbox_id" />

Это установит / уберет флажок при нажатии на ярлык.Все пункты, сделанные @elclanrs выше, тоже верны, html и js недействительны.

0 голосов
/ 12 февраля 2012

Ваш код, как HTML, так и JavaScript недействительны.
<label> - это элемент inline, в котором не может быть элементов block, таких как <div>.
Тогда ваш код JSне хватает некоторых ; (я вижу, вы добавили их).Кроме того, это не имеет смысла: 

$("input[for=checkboxlabel]").attr('checked', !$checkbox.attr('checked'))

Это должно работать.Обратите внимание на новые html-теги и правильный код jQuery:

html: 

<li>
    <label>Something that describes this checkbox</label>
    <input id="check" type="checkbox">
    <p>Some Other Content</p>
    <a href="#" id="pledge">Click to Pledge</a>
</li>

jQ: 

$('#pledge').click(function()}{ $('#check').prop('checked', true); });
...