Проверьте ввод [type = checkbox] в обработчике событий jQuery - PullRequest
2 голосов
/ 21 октября 2011

У меня есть следующий HTML:

<ul id=list>
    <li>
        <input type=checkbox />
        Item 1
    </li>
    <li>
        <input type=checkbox />
        Item 2
    </li>
    <li>
        <input type=checkbox />
        Item 3
    </li>
</ul>

и соответствующий ему Javascript:

$('ul').bind('click', function(e) {

    if (e.srcElement.tagName.toLowerCase() === 'input') {
        e.srcElement.checked = true;
    }

    return false;
});

$('body').bind('click', function() {

    alert('you should see this alert if and only if you did NOT click the list');

})

Когда я нажимаю флажок, он не проверяется.Я хочу, чтобы он был проверен, когда пользователь щелкает по нему.

Как мне сделать так, чтобы флажок был установлен, когда пользователь щелкает по нему, но все равно отменять обработчик события body click?

Я также установил JS-скрипку .

Редактировать: Я понимаю, что код немного неуклюжий, но ему нужнобыть структурированным таким образом для приложения, поэтому решения должны быть максимально приближены к оригиналу.При этом объяснения наблюдаемого поведения приветствуются.

Ответы [ 3 ]

3 голосов
/ 21 октября 2011

Используйте e.stopPropagation() [документы] вместо return false. Последний также предотвращает выполнение действия по умолчанию, которое переключает состояние флажка.

Вам также следует связать обработчик событий с событием change вместо click, так как мышь - не единственный способ установить флажок. Вам по-прежнему нужно добавить дополнительный обработчик, чтобы предотвратить всплытие события click.

2 голосов
/ 21 октября 2011

Я думаю это это то, что вы хотите?

$('ul').bind('click', function(e) {          
    e.stopPropagation();       
});

$('body').bind('click', function() {
    alert('you only see this alert if and only if you did NOT click the list');
})
2 голосов
/ 21 октября 2011
  1. Вы привязываете клик к "ul", вы должны привязывать его к "ul> input"
  2. , чтобы избежать всплывающего клика, вам нужно отменить всплывающее окно с помощью event.stopPropagation () Я заметил, что stopPropagation () должен быть первым в функции.

    $('ul').bind('click', function(e){
        e.stopPropagation();
        if (e.target.tagName.toLowerCase() === 'input') {
           e.target.checked = true;
        }
    });
    
    $('body').bind('click', function() {
    
        alert('you should see this alert if and only if you did NOT click the list');
     });
    
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...