Как проверить, есть ли клик/событие, связанное с элементом

говорит, что у меня

function trigger(){

    $('a.pep').each(function(){
            $('a.pep').click(function(){
            console.log($(this).val());
        });
    });
}
function push(){
    $('body').append('<a class="pep">hey mate i have no trigger yet</a>');
    trigger();  //now i do but the others have duplicated trigger
}
$(document).ready(function(){
     $('a.push').click(function(){
        push();
     });
});

Таким образом, кажется, что событие click применяется дважды /+, потому что console.log отображается несколько раз щелчком

Как я могу предотвратить это?

Ответ 1

Проблема заключается в том, что вы вызываете $('a.pep').click() много раз. (Фактически, вы связываете столько обработчиков кликов, что каждый элемент имеет соответствующие элементы, а затем вы делаете это снова каждый раз, когда нажимается один из них.)

Чтобы справиться с этим, вы должны задействовать модель барботирования событий DOM. jQuery поможет вам с помощью метода on:

$(document.body).on('click', 'a.pep', function() {
    console.log('element clicked');
    $(document.body).append('<a class="pep">Click handlers handled automatically</a>');
});

См. рабочий jsFiddle.

Обратите внимание, что я удалил вызов val, потому что элементы a не могут иметь значение... Обратите внимание также, что метод on введен в jQuery 1.7; перед этим используйте delegate:

$(document.body).delegate('a.pep', 'click', function() {

Ответ 2

Небольшое изменение функции триггера - это все, что вам нужно. Просто отвяжите событие click перед привязкой, чтобы убедиться, что он никогда не добавляется более одного раза. Кроме того, вам не нужно использовать каждый при привязке событий, он автоматически добавит событие в каждый элемент.

function trigger(){        
    $('a.pep').unbind('click').click(function() {
        console.log($(this).val());
    });
}

Ответ 3

Вы можете проверить с помощью data('events') на любом элементе, если необходимое событие подключено или нет. Например, чтобы проверить, подключено ли событие click или нет.

if(!$('a.pep').data('events').click){
   $('a.pep').click(function(){
      console.log($(this).val());
   });
}

Ответ 4

вы должны использовать jQuery live here, потому что вы динамически добавляете элементы DOM и хотите, чтобы они имели одинаковое поведение click

function push(){
    $('body').append('<a class="pep">hey mate i have no trigger yet</a>');
}
$(document).ready(function(){
     $('a.push').click(function(){
        push();
     });
     $('a.pep').live('click', function(){
        console.log($(this).val());
    });
});

Ответ 5

Try:

if($('a.pep').data('events').click) {
   //do something
}

Ответ 6

Я думаю, если вы используете событие live(), вам не нужно делать функцию

$('a.pep').live('click', function(){
    console.log($(this).val());
});