jquery - 无法绑定到jQuery中的单击事件

Question

制作一个li dom，将li添加到ul，并启用li dom上的点击是一个愚蠢的问题。代码片段通过将 li 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('click',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 的字符串，而不是对 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());
}