jQuery的點擊事件不起作用

Question

我找不到為什么我的代碼無法正常工作的原因。 當我單擊生成的元素時，警報不會觸發。

這是一個小提琴： http : //jsfiddle.net/pZAdP/

和代碼

<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);
})

與：

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

工作場所

Answer 2

您需要對動態生成的元素使用事件委托

您可以對所有動態生成的menu_使用以選擇器開頭的屬性

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

小提琴演示

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();
});

小提琴

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);

注意： parent-selector必須是綁定事件時DOM中存在的parent元素，通常人們使用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);
})