Question

我无法找到为什么我的代码不起作用。当我点击生成的元素时，警报不会触发。

代码

<button id="addMenuItem">Add Menu Item</button>
<div id="content"></div>

function addMenuItem(){
    var span = document.createElement("span");
    span.setAttribute("id", "menu_" + inc);
    span.innerHTML = "  #menu_" + inc++ + " |";
    var content = document.getElementById("content");
    content.appendChild(span);
}

$("#addMenuItem").click(function(){
    addMenuItem();
})

$("#menu_1").on("click", function(){
    alert(this.id);
})

Answer 1

您需要更改

$("#menu_1").on("click", function(){
    alert(this.id);
})

with：

$("#content").on("click", "#menu_1", function(){
    alert(this.id);
})

工作FIDDLE

Answer 2

您需要将event delegation用于动态生成的元素

您可以对所有动态生成的menu_

使用attribute starts with selector

$("#content").on("click", "[id^='menu_']", function(){
    alert(this.id);
})

Fiddle DEMO

Answer 3

你正在使用jQuery，所以这样做很简单，在创建元素时添加事件处理程序，这样当你创建多个元素时，你不必担心选择器中的递增ID

var inc = 1;
function addMenuItem(){
    $('<span />',  {
        id   : 'menu_' + inc,
        html : '#menu_' + (inc++) + ' |',
        on   : {
            click : function() {
                alert(this.id);
            }
        }
    }).appendTo('#content');
}

$("#addMenuItem").click(function(){
    addMenuItem();
});

FIDDLE

Answer 4

http://jsfiddle.net/pZAdP/4/

将你的onclick用于addMenuItem（）函数内的菜单。

function addMenuItem(){
var span = document.createElement("span");
span.setAttribute("id", "menu_" + inc);
span.innerHTML = "  #menu_" + inc++ + " |";
var content = document.getElementById("content");
content.appendChild(span);

$("#menu_1").on("click", function(){
alert(this.id);})}

请记住，您正在按ID进行选择。如果您按类选择，那么将单击处理程序放在方法之外就可以了。

Answer 5

您需要将.on与事件委派

一起使用

<强>语法

$(parent-selector).on(event,target-selector,callback);

注意：父选择器必须是绑定事件时DOM中存在的父元素，通常人们使用document和body，但是为了表现，你必须拥有最近的父母到目标

示例

$(document).on("click",".button",function(){ alert("Button Clicked"); });

Answer 6

var inc = 1;
function addMenuItem(){
    var span = document.createElement("span");
    span.setAttribute("id", "menu_" + inc);
    span.innerHTML = "  #menu_" + inc++ + " |";
    var content = document.getElementById("content");
    content.appendChild(span);
    $("#menu_1").on("click", function(){
    alert(this.id);
})
}

$("#addMenuItem").click(function(){
    addMenuItem();
})

您正在尝试将事件添加到尚不存在的元素中。

Answer 7

试试这个：

它适用于id为menu _ *的所有动态范围：

var inc = 1;
function addMenuItem(){
    var span = document.createElement("span");
    span.setAttribute("id", "menu_" + inc);
    span.innerHTML = "  #menu_" + inc++ + " |";
    var content = document.getElementById("content");
    content.appendChild(span);
}

$("#addMenuItem").click(function(){
    addMenuItem();
})

$(document).on("click", "[id^='menu_']", function(){
    alert(this.id);
})

Answer 8

选择它时，该元素不在页面上，选择生成的元素：

$(document).on("click","#menu_1", function(){
    alert(this.id);
})

单击事件上的Jquery不起作用

8 个答案: