Question

制作标题，将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());
}

无法绑定到jquery中的click事件

3 个答案: