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

Question

Допустим, у меня есть

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 запускается более одного раза нажатием

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

Answer 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 call, потому что a элементы не могут иметь значения ... Обратите внимание также, что метод on введен в jQuery 1.7;перед этим используйте delegate:

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

Answer 2

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

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

Answer 3

вы должны использовать jQuery live здесь , потому что вы динамически добавляете элементы 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());
    });
});

Answer 4

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

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

Answer 5

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

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

Answer 6

Попробуйте:

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