Question

我正在创建一个简单的页面构建器我使用这个JQuery代码来附加新的技能栏＆＃39;到一个元素

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

但是我的新问题是效果应该在元素追加之后运行但是它没有这样做...我不知道应该在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', ...);

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

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

1 个答案: