Живые события в jQuery 1.7+ - PullRequest
Новая
       17

Живые события в jQuery 1.7+

2 голосов
/ 27 января 2012

Я пытаюсь использовать метод on для будущих элементов DOM, но по какой-то причине вместо вызова событий по щелчку он запускает их при динамическом создании объектов DOM.

вот код, который у меня есть. 

$("#checkbox1").on('click', toggleChecked(this.checked)); //this is included in Ajax call success method


function toggleChecked(status) {
    $(".item").each(function () {
        $(this).prop("checked", status);
    });
}

Что я здесь не так делаю?

Ответы [ 4 ]

2 голосов
/ 27 января 2012

toggleChecked(this.checked) сразу же выполнит функцию, а затем on получит возвращаемое значение в качестве обработчика, который не определен.

Оберните ее анонимной функцией, чтобы она вызывалась при click на флажке. 

$("#checkbox1").on('click', function(){
   toggleChecked(this.checked)
});

Если вы используете метод toggelChecked сразу как обработчик click, вы можетеполучить статус checked флажка, используя `this.checked внутри обработчика.

2 голосов
/ 27 января 2012

Две проблемы:

  • Добавляя круглые скобки, вы выполняете функцию, вы должны передать ссылку на функцию в .on ()

  • Вы не можете передавать параметры так, как хотите. Но this в обработчике событий будет DOMElement, по которому щелкнули, поэтому вы можете получить значение свойства checked внутри него с помощью this.checked

Вот модифицированный код: 

$("#checkbox1").on('click', toggleChecked);


function toggleChecked() {
    // "this" here is the clicked element
    var status = this.checked;
    $(".item").each(function () {
        // be careful in .each() 'this' is the currently iterated element
        $(this).prop("checked", status);
    });
}
1 голос
/ 27 января 2012

Как указали люди, вы делаете функцию неправильно (функция должна быть анонимной функцией или указателем на функцию, или строкой, указывающей на функцию). Но вы также используете неправильный метод on, он не совсем совпадает с методом live. Вы смотрите документ (или область документа), и в этом есть подселектор. 

$(document).on('click', "#checkbox1", function() {
    var status = this.checked;
    $(".item").each(function () {
        $(this).prop("checked", status);
});

Примечание: если все ваши чекбоксы создаются в 'checkBoxDiv', ваш селектор может быть: 

$("#checkBoxDiv").on('click', "#checkbox1", ...

Для получения дополнительной информации о том, как использовать 'on', см. Сравнение функций в 'live' документации (примерно на 1/3 пути вниз по странице).

Из документации:

Переписать метод .live () с точки зрения его наследников прямой; это шаблоны для эквивалентных звонков для всех три метода прикрепления к событию: 

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery
1.4.3+ $(document).on(events, selector, data, handler); // jQuery 1.7+

Аргумент события может быть разделенным пробелами списком типа события. имена и необязательные пространства имен, или карта событий строк имен событий и обработчики. Аргумент data является необязательным и может быть опущен. За Например, следующие три вызова метода функционально эквивалентны (но см. ниже для более эффективных и эффективных способов прикрепить делегированные обработчики событий): 

$("a.offsite").live("click", function(){ alert("Goodbye!"); });                // jQuery 1.3+    
$(document).delegate("a.offsite", "click", function(){ alert("Goodbye!"); });  // jQuery 1.4.3+ 
$(document).on("click", "a.offsite", function(){ alert("Goodbye!"); });        // jQuery 1.7+
1 голос
/ 27 января 2012

Вы должны поместить слушатель события в функциональные литералы. В противном случае функция вызывается напрямую. 

$("#checkbox1").on('click', function() {
    toggleChecked(this.checked);
});

Сама функция может быть написана более эффективно: 

function toggleChecked(status) {
    $(".item").prop("checked", status);
}
...