無法綁定到jquery中的點擊事件

Question

這是一個愚蠢的問題，做一個人的生活，將李添加到ul，並啓用點擊點擊。 代碼段的工作原理是將李DOM來了UL，

var li = '<li><a href="#" data-action="app">' + name +'</a></li>'; 
$("ul").append(li); 
$(li).bind('click',onClick); 
function onClick(e){ 
    console.log('click ',$(this).html()); 
} 

，但是當我使用$（LI）.bind（ '點擊' 的onClick）;它似乎工作，我很困惑，爲什麼？

Answer 1

li這裏不是jQuery元素。一個$()調用中包住HTML把它變成一個：

var li = $('<li><a href="#" data-action="app">' + name +'</a></li>'); 
$("ul").append(li); 
$(li).bind('click',onClick); 
function onClick(e){ 
    console.log('click ',$(this).html()); 
} 

目前，要附加原始的HTML到<ul>，然後再創建一個新的元素，當你嘗試綁定。這個新創建的元素永遠不會添加到DOM，因此事件永遠不會被觸發。

您可以繞過需要.bind每一個元素是利用事件代表團加入時間：

$(function() { 
    // Only need to bind this once 
    $("ul").on('click',"li", function() { 
     console.log('click ',$(this).html()); 
    }); 
}); 

// Call this any time you want to add a new li to the list 
function addLi() { 
    var li = '<li><a href="#" data-action="app">' + name +'</a></li>'; 
    $("ul").append(li); 
} 

Answer 2

事件代表團使用

$('ul').on('click','li',onClick); 

function onClick(e){ 
    console.log('click ',$(this).html()); 
} 

或

$('ul').on('click','li',function(){ 
    console.log('click ',$(this).html()); 
} 

Answer 3

它不起作用，因爲li只是包含您插入的HTML的字符串，而不是引用t DOM元素本身。你可能想這樣做：

var $li = $('<li><a href="#" data-action="app">' + name +'</a></li>').appendTo('ul'); 
$li.bind('click',onClick); 
function onClick(e){ 
    console.log('click ',$(this).html()); 
}