Как использовать jQuery bind или addEventListener в массивах? - PullRequest
Новая
       30

Как использовать jQuery bind или addEventListener в массивах?

0 голосов
/ 03 ноября 2011

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

function getCheckedVal(){
    var checked = $('#education_number input:radio:checked')
    console.log(checked.val());
};

Это не работает: 

window.onload = function(){
    var radio = $('#education_number input:radio');
    for(var i=0; i<radio.length; i++){
        radio[i].addEventListener('blur', function(){getCheckedVal()});
        };
    }

И это исключение: 

window.onload = function(){
    var radio = $('#education_number input:radio');
    for(var i=0; i<radio.length; i++){
        radio[i].bind('blur', getCheckedVal());
        };
    }

Uncaught TypeError: Объект #HTMLInputElement не имеет метода 'bind'

Как это сделать?

Ответы [ 3 ]

2 голосов
/ 03 ноября 2011

Во втором примере вы вызываете getCheckedVal и затем передаете возвращаемое значение в bind.Вам не нужны эти () после getCheckedVal: 

window.onload = function(){
    var radio = $('#education_number input:radio');
    for(var i=0; i<radio.length; i++){
        $(radio[i]).bind('blur', getCheckedVal);
    }
}

(заметьте, я добавил $(...) вокруг radio[i], потому что radio[i] является необработанным элементом DOM, а не объектом jQuery.)

Но вы можете значительно упростить этот код: 

window.onload = function(){
    $('#education_number input:radio').blur(getCheckedVal);
}

jQuery основан на множествах.Вы можете работать со всем подобранным набором элементов, вместо того, чтобы циклически проходить через набор самостоятельно.

Однако следует учитывать две вещи:

  • У вас действительно только хотите эту информацию на размытиеНапример, не на change?
  • Вы действительно хотите подождать, пока событие window#load не подключит ваши обработчики событий?Это на очень опоздание в процессе загрузки страницы, после того как все ваши изображения и так далее закончили загрузка.Вместо того, чтобы использовать window#load, рассмотрите возможность размещения вашего скрипта в конце, непосредственно перед закрывающим тегом </body>, или использования функции ready в jQuery .
0 голосов
/ 03 ноября 2011

Это просто: 

$('#education_number input:radio').bind('blur', getCheckedVal);

Обратите внимание на пропущенные () после getCheckedVal. Вы должны передать ссылку в функцию, а не вызвать функцию.

Я рекомендую прочитать один из jQuery туториалов , чтобы узнать об основах.

Одним из больших преимуществ jQuery является то, что он позволяет легко выполнять действия с коллекцией элементов HTML. $('selector') всегда возвращает объект jQuery, так что вы можете воспользоваться этим. Если бы у вас был чистый массив элементов DOM, то да, вам пришлось бы перебирать их и индивидуально связывать обработчик событий.

0 голосов
/ 03 ноября 2011

bind - это метод jQuery, но на этом этапе у вас есть только HTMLInputElement - к счастью, вы можете передать элемент в jQuery и получить доступ ко всем его функциям:

Измените: 

radio[i].bind('blur', getCheckedVal());

на 

$(radio[i]).bind('blur', getCheckedVal);

Вам также необходимо удалить скобки из getCheckedVal - передача getCheckedVal () в bind приведет к немедленной оценке функции итолько возвращаемое значение будет привязано к вашему событию.Вместо этого вам нужно передать ссылку на функцию в bind.

...