Как избежать многократного вызова функции

0

У меня есть функция события click для создания новых элементов dom. В принципе, каждый раз, когда я нажимаю кнопку. Это позволяет создать новый тег гиперссылки.

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

Пожалуйста, посмотрите следующий код,

var id = 1;

$('#create').on('click', function() {
   id ++ 
   $('.players').append('<a href="#" class="new" data-id='+ id + '> ' + id + 'player</a>');

   getId() 

 });

function getId() {
   $('.new').on('click', function() {
   var id = $(this).data('id')
   alert(id);
});
}

Моя проблема заключается в том, что я не хочу запускать getId() каждый раз, когда я нажимал кнопку, но если я запускаю getId() функцию getId(), новая созданная гиперссылка не будет выполнять эту функцию.

В любом случае я могу вызвать getId() один раз. и все еще собирается создать новую созданную гиперссылку?

Теги:

3 ответа

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

Используйте делегирование, тогда нет необходимости присоединять функцию обработчика событий каждый раз, когда вы добавляете. Удалите getId() и замените ее на делегированный метод on():

var id = 1;

$('#create').on('click', function () {
    id++;
    $('.players').append('<a href="#" class="new" data-id=' + id + '> ' + id + 'player</a>');
});

$('.players').on('click', '.new', function(e) {
    e.preventDefault();
    var id = $(this).data('id')
    alert(id);
});

JSFiddle

  • 0
    Да уж. Делегация это то, что я искал. Спасибо
  • 0
    Я так и думал - мне показалось, что я неправильно прочитал, когда увидел ответ C-link. Рад, что помог.
3

Вы можете использовать один метод для использования этой функции только один раз.

function getId() {
   $('.new').one('click', function() {
   var id = $(this).data('id')
   alert(id);
});
  • 0
    Я не понимаю, OP все равно придется вызывать getId() для каждого добавляемого элемента.
0

Попробуйте использовать для() для dynamic elements например,

$(function(){
    var id = 1;
    $('#create').on('click', function() {
       id ++;
       $('.players').append('<a href="#" class="new" data-id='+id+'>'+id+'player</a>');
    });

    $(document).on('click','.new', function() {
  //use ^ document or your parent element players
       var id = $(this).data('id');
       alert(id);
    });
});

Ещё вопросы

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