найти правильное событие для нового прилагаемого elemets

Question

Я создаю простую страницу строитель Я использую этот код JQuery для добавления нового «навыка бара» к элементу

\t var percent = 0; 
 
\t $("#progressbar").click(function() { 
 
\t var title = document.getElementById('pb-title').value; 
 
\t percent = document.getElementById('pb-percent').value; 
 
\t var item = '<div class="skills-section"><div class="skills-progress"><p>' + title + '<span>' + percent + '</span></p><div class="meter nostrips wp"><span></span></div></div></div>'; 
 
\t $(SelectedElement).append(item); 
 
\t percent += '%'; 
 
\t });

, и скилл-бар имеет эффект загрузки, но после создания этого нового эффекта мастер-эффект эффекта не работает, и, когда я его ищу, я использую on() для решения этой проблемы, и теперь он решает этот код

\t $(document).on('what should be here ?!', '.meter > span', function() { 
 
\t $(this) 
 
\t  .data("origWidth", $(this).width()) 
 
\t  .width(0) 
 
\t  .animate({ 
 
\t  width: percent 
 
\t  }, 1200); 
 
\t });

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

Answer 1

Поскольку вы создаете новые элементы в собственном коде, вы можете вызвать любое событие, которое вы хотите:

var percent = 0; 
$("#progressbar").click(function() { 
    var title = document.getElementById('pb-title').value; 
    percent = document.getElementById('pb-percent').value; 
    var item = '<div class="skills-section"><div class="skills-progress"><p>' + title + '<span>' + percent + '</span></p><div class="meter nostrips wp"><span></span></div></div></div>'; 
    $(SelectedElement).append(item); 
    percent += '%'; 

    $(this).trigger('myevent'); 
}); 

$(document).on('myEvent', ...); 

В некоторых последних версиях браузеров, вы можете использовать Mutation Observers для обнаружения изменений в DOM. Но некоторые броузеры не поддерживают его.