У меня есть функция события 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()
один раз. и все еще собирается создать новую созданную гиперссылку?
Используйте делегирование, тогда нет необходимости присоединять функцию обработчика событий каждый раз, когда вы добавляете. Удалите 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);
});
Вы можете использовать один метод для использования этой функции только один раз.
function getId() {
$('.new').one('click', function() {
var id = $(this).data('id')
alert(id);
});
getId()
для каждого добавляемого элемента.
Попробуйте использовать для() для 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);
});
});