Блог

Главная - Вопросы по программированию - Странное поведение при привязке щелчка к двум элементам в jQuery

Странное поведение при привязке щелчка к двум элементам в jQuery

#javascript #jquery #each

#javascript #jquery #каждый

Вопрос:

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

  console.log($('img[title*="Show"]'));
  $('img[title*="Show"]').each(function(index, value){
    switch(index){
        case 0:
            console.log('object');
            $(this).live('click', function(e) {
                console.log('object clicked');
            });
        break;

        case 1:
            console.log('record');
            $(this).live('click', function(e) {
                console.log('record clicked');
            });
        break;
    }
  });

СТРАННОЕ ПОВЕДЕНИЕ

  1. object и record печатаются, поэтому я знаю, что есть 2 элемента.
  2. Когда я нажимаю на изображение, которое связано с объектом, record печатается.
  3. Когда я нажимаю на изображение, связанное с записью, ничего не печатается.

Я не уверен, как я могу это решить.

Комментарии:

1. Судя по всему, пахнет проблемой индексации. Посмотрите, решит ли проблему изменение case 0: на case 1: и изменение case 1: на case 2: . Затем вам нужно выяснить, так ли jQuery индексирует элементы при использовании each или у вас может быть дополнительный img элемент где-то на странице, который предшествует двум другим.

2. Интересно. Когда я меняю его на случай 1 и случай 2, объект, на который нажат, печатается, и ничего не происходит, когда я нажимаю на 2-е изображение. Также объект и запись больше не печатаются.

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

4. Почему вы используете live для привязки события щелчка? Поскольку вы привязываете событие щелчка к известному объекту в DOM (т.Е. К изображению на текущей each итерации) Я не вижу пользы. Я заменил его на bind in a fiddle, и все работало гладко: jsfiddle.net/FVSUV

5. Это помогло бы увидеть ваш html-код.

Ответ №1:

Цель .live метода — позволить вам указывать обработчики событий для объектов DOM, которые могут измениться или еще не существуют. Это работает, потому что на самом деле обработчик вообще не привязан. Вместо этого уже существующий обработчик в корне документа просматривает все зарегистрированные селекторы .live() , чтобы определить, соответствует ли какой-либо из них.

В вашем примере вы передаете объект DOM напрямую, а не селектор jQuery. Итак, что, вероятно, происходит (хотя я не уверен), так это то, что он пытается присоединить текущие события к селекторам, созданным путем упорядочивания объектов DOM, что может привести к странным, неожиданным результатам.

Если вы пытаетесь прикрепить события к одному объекту DOM, который не изменится, просто используйте .bind() функцию.

Если вам действительно нужно использовать live, вы можете реструктурировать код так, чтобы указать селекторы, соответствующие элементам. Например:

 var selector = 'img[title*="Show"]';
$(selector).each(function(index, value){
    switch(index){
        case 0:
            console.log('object');
            $(selector ":eq(0)").live('click', function(e) {
                console.log('object clicked');
            });
        break;

        case 1:
            console.log('record');
            $(selector ":eq(1)").live('click', function(e) {
                console.log('record clicked');
            });
        break;
    }
});

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