为新附加的元素找到合适的事件

Question

我正在创建一个简单的页面生成器我使用这个JQuery代码将新的"技能条"附加到元素

	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 += '%';
	});

，技能栏有一个加载效果，但在我创建了这个新的技能栏后，效果不起作用，当我搜索它时，我使用on（）来解决这个问题，它现在通过这个代码来解决

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

但我的新问题是，效果应该在元素附加后运行，但它没有这样做。。。我不知道应该在on（）第一个参数中调用哪个事件。。。我测试了点击，它工作（效果显示完美），但我希望它在元素创建后自动。

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', ...);

在最近的一些浏览器中，您可以使用突变观测器来检测DOM中的更改。但是有些浏览器不支持它。