Javascript 按钮未触发事件的Jquery

Javascript 按钮未触发事件的Jquery,javascript,jquery,event-delegation,Javascript,Jquery,Event Delegation,我已经找到了这个问题的答案,我理解事件委托是如何工作的,但我所尝试的一切都没有改变。 动态创建的按钮在手动单击时不会触发on事件,但是使用触发器方法可以工作,我的代码有什么问题 components.forEach(function (component) { var id = randomId(); var li = $.create("li").addClass("col-12"); componentList.append(li); var btn = $.create("

我已经找到了这个问题的答案,我理解事件委托是如何工作的,但我所尝试的一切都没有改变。 动态创建的按钮在手动单击时不会触发on事件,但是使用触发器方法可以工作,我的代码有什么问题

components.forEach(function (component) {
  var id = randomId();
  var li = $.create("li").addClass("col-12");
  componentList.append(li);
  var btn = $.create("button")
    .text(component.type)
    .attr("id", id)
    .addClass("btn")
    .appendTo(li);
  componentList.on("click", "#" + id, function () {
    alert("test");
    window.circuit.push(component.create());
    circuitList.refresh();
  });
  btn.trigger("click");
});
$.create = function (arg) {
  return $(document.createElement(arg));
}
randomId = function () {
  return "id" + Math.floor(Math.random() * 100000) + "_" + Math.floor(Math.random() * 100000);
} 
显示屏如预期,按钮不会手动启动。
组件是具有类型属性和创建方法的对象数组。

以下语句错误:

componentList.on("click", "#" + id, function () {...
jQuery非常聪明,只需使用类甚至标记作为第二个参数,就可以知道单击了哪个按钮

$('.list').on("click", '.btn', function(e) {
在演示中对细节进行了评论

演示 /*不知道应该是什么组件*/ var组件=[‘电位计’、‘晶体管’、‘电容器’、‘变压器’]; /*在每个循环上,$.map将运行一个函数*/ $.mapcomponents、functioncmp、idx{ var ranID=随机ID; /*使用jQuery创建节点很容易 ||实际上,您可以将字符串指定给 ||jQuery对象,当与jQuery方法一起使用时 ||它将被解析成真正的HTML */ var li=$; $'.list'.appendli; /*此字符串是模板文本。TL是 ||具有强大语法的字符串。 */ var btn=$`${cmp}`; 附属物; }; /*最初,OP具有动态生成的 ||id作为“this”,这是错误的,毫无意义的。 ||第二个参数应该是一个类,例如“.btn” */ $'.list'.onclick,'.btn',function e{ var ID=$this[0].ID; $`${ID}`。在$this之后插入; console.logID; 警报`ID:${ID}类型:${this.textContent}`; }; 函数随机ID{ 返回id+Math.floorMath.random*100000+93;+Math.floorMath.random*100000; }
您应该尝试使用$'body'。在'click'上,+id,函数{.Change componentList.on…to componentList.live…live已被弃用,更改为body会产生相同的行为在对象和属性之间放置空格是一种可笑的烦人编码做法。顺便说一句,jQuery使用$。每个都使用$。通常我在任何地方都没有空格,因为我使用屏幕阅读器,所以这对我来说很重要,但我被告知要使用空格如果id是防止每个组件调用函数所必需的,我知道jquery可以解析html,但我不喜欢将它与之混合js@user7951676不管怎样,它都会被调用,componentList是一个id和.btn的列表。如果您想避免搜索DOM时出现微不足道的增加,那么就使用id作为选择器。不管怎么说,除了解析HTML,您的问题是让动态创建的元素上的事件工作。on'click'…工作吗?li.on也不工作,如果没有id,则为每个组件调用处理程序,因为事件将匹配每个组件one@user7951676然后您不知道什么是事件委派,事件处理程序通过usi查找id更进一步,你怎么能说它不起作用?当你按下一个按钮时…你看到它做了什么?当我按下按钮时,不管是我的还是你的答案,什么都没有发生