Как в jQuery отследить асинхронное создание нового элемента в документе и добавить к нему ответ из функции?

Question

[Платон Фёдорович]

Приветствую.

Сразу извиняюсь за корявый вопрос, но не знаю как ещё спросить. Расскажу, лучше, на примере.

Есть скрипт, в котором есть вот такая функция:

var myFunc= function() {
  // В файле response.json находится обычный JSON,
  // для примера вот такой: {"one":"1","two":"2","three":"3"}
  $.getJSON('data/response.json', function(data) {
    $('span.counter').text(data.one);
  });
};

Также, в скрипте есть возможность добавления элемента (что-то типа ToDo листа по функционалу):

$(function() {
  $('#add').on('click', function(event) {
    event.preventDefault();
    $('<a href="#" class="my-class">Element <span class="counter"></span></a>').appendTo('#result');
  });
});

Вопрос: как отследить создание нового элемента (после клика по кнопке с id="add") и добавить к нему ответ из функции myFunc()? То есть просто обновить запрос к файлу $.getJSON для этого нового элемента, а не для всех, которые были созданы ранее?

ADD:

Решение https://jsfiddle.net/730xnkzr/#run

Comments

[Платон Фёдорович]

Добавлю, что новый элемент может быть создан не только с помощью клика по кнопке, но и при выполнении кода других функций. То есть нужно что-то типа рефрешера значения из $.getJSON(), если в документе (DOM) появился ещё один элемент с классом my-class.

Answer 1

[littleguga]

$(function() {
  $('#add').on('click', function(event) {
    event.preventDefault();
    $('<a href="#" class="my-class">Element <span class="counter"></span></a>').appendTo('#result');
    myFunc();
  });
});

Чем не подходит?

Comments

[Платон Фёдорович]

Тем, что при этом функция будет обновлять все элементы, а не один только что созданный. Вообще, я думал, что надо как-то через вот такой код идти:

$(document).on('change', 'body', function() {
  // код вызова myFunc() для только что созданного элемента
});

То есть, слушаем изменения в body (document) и, если они были даже после DOM ready, применяем функцию myFunc() **к этому** элементу. Соответственно, если у элемента есть span class="counter", то функция работает, если нет — то ничего не происходит (да, там дописать условие if else ещё надо).

[littleguga]

Платон Фёдорович: Вам нужно добавить элемент, а потом обновить его содержимое на то, которое получите ajax запросом?

[Платон Фёдорович]

littleguga: Да, именно это нужно. То есть нужно что-то типа рефрешера значения из $.getJSON(), если в документе появился ещё один элемент с классом my-class.

[Платон Фёдорович]

Для одного этого элемента, естественно, а не для всех с таким же классом, созданных ранее.

[littleguga]

Платон Фёдорович: так перепишите функцию myFunc, чтобы она могла работать только с одним элементов и после добавления вызывайте ее, как я написал в ответе

[Платон Фёдорович]

littleguga: Функцию переписать не могу, в этом-то и дело, что надо без затрагивания myFunc() сделать. Тем более элементов для создания (с одним классом и разными data атрибутами) не один, а много.

[littleguga]

Платон Фёдорович: если функция заточена на работу со всеми элементами, как Вы хотите, чтобы она работала только с одним элементом?
Робот запрограммирован проезжать 5 клеток за один ход, если его не перепрограммировать, он не сможет проехать 1 клетку.

[Платон Фёдорович]

littleguga: Если быть максимально конкретным, то мне нужно вот в этот код https://github.com/enjoyiacm/goodshare.js/blob/mas... вставить функцию, которая при создании нового элемента в документе (например через кнопку id="add") с data-counter="XX" (где XX — код соц. сети) обновляля счётчик для именно этого элемента (или просто все счётчики, если добавился новый элемент в документе).

[Платон Фёдорович]

Добавлю, что не только с on('click', ...) но и с любого другого эвента и из любой другой функции. Поэтому предложенный вами код выше — просто не будет работать при этом.

[littleguga]

Платон Фёдорович: при создании он автоматом обновляется же

[Платон Фёдорович]

littleguga: В этом-то и дело, что нет. Для наглядности, нашёл у них там usage example и вставил в jsfiddle — jsfiddle.net/6xjmhgLm Сделал два примера: по клику и просто по таймеру. Ни в одном случае счётчик у нового элемента не обновляется после добавления.

[littleguga]

Платон Фёдорович: пишите авторам плагина, так как согласно документации .getCounter должен обновлять счетчики. а он не обновляет

[littleguga]

Платон Фёдорович: написал им

[Платон Фёдорович]

littleguga: Спасибо за issue. По ответу, вроде как, уже пофиксили. И точно! Работает как надо с вашим кодом, только делаю как у них в демке сделано —$(document).getCount();