jQuery .on привязка событий

0

У меня есть jQuery Javascript, работающий с блоками (2,.delegate) и (3,. ready+.click) ниже для обнаружения всякий раз, когда пользователь нажимает данный флажок. Однако, если я использую блок (1,.on, как рекомендовано для jQuery> 1.7), кажется, что событие не связано с данной функцией:

// Block #1: .on
$("#userCheck").on("keyup keypress paste mouseup", function(){
    alert("hello");
});

/* Blocks are commented since I would like to use .on jQuery function 
// Block #2: .delegate
$(document).delegate('#userCheck', 'click', function(){
    alert("hello");
});

// Block #3: .ready + .click
$(document).ready(function(){
    $( "#userCheck" ).click(function(){ alert("hello"); });
});
*/

HTML-код следующий (только соответствующая часть, сгенерированная с помощью Django):

{% for r in requests_list %}    
    <tr>
        <td class='rr-e'>{{ r.username }}</td>
        <td class='rr-e'>{{ r.organization }} ({{ r.country }})</td>
        <td class='rr-e-select'>
            <input type='checkbox' id='userCheck' userid="{{ r.pk }}"/>
        </td>
    </tr>

    <tr><td class='row-separator' colspan='3'/></tr>

{% endfor %}

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

В дополнение к этому предыдущий код работает в следующем примере: http://jsfiddle.net/9r6kf/124/

  • 2
    Вы можете поделиться своей разметкой? также, если флажок создается динамически
  • 0
    также убедитесь, что идентификатор элемента checkUser является уникальным
Показать ещё 9 комментариев
Теги:
javascript-events

2 ответа

0
Лучший ответ

Как сказал @charlietfl, ключ заключался в том, чтобы обернуть функцию.on() функцией.ready() следующим образом:

$(document).ready(function(){
    $("#userCheck").on("keyup keypress paste mouseup", function(){
        alert("hello");
    });
});

В дополнение к этому, но не как решение этой проблемы, идентификатор для флажков должен быть изменен, чтобы он был уникальным для всех флажков. Однако это не было корнем проблемы, поскольку в списке был только один элемент, поэтому Django сгенерировал только один флажок.

Однако в примере по адресу http://jsfiddle.net/9r6kf/124/ он работает без необходимости обертывания этой функции с помощью.ready(). Зачем?

Поделиться
1

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

Вместо этого вы можете использовать атрибут class и выбрать свой элемент с помощью .userCheck.

HTML

<input type='checkbox' class='userCheck' userid="{{ r.pk }}"/>

JavaScript

$('.userCheck').on('click keyup ...', function() {
    alert('hello');
});

Кроме того, лучше всего делегировать ваши события элементу контейнера, а не добавлять их к каждому элементу при использовании цикла. Метод on позволяет вам это сделать. Возьмем следующий пример:

$('#your-table').on('click keyup ...', '.userCheck', function() {
    alert('hello');
});

Пример, связанный с jsfiddle: http://jsfiddle.net/RuPzY/1/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню