javascript - 如何在我使用 jquery 动态创建的 HTML 元素上附加事件？

Question

var li = $("<li>").attr({
    id: "print",
    click: function(e){
     alert(this);
     console.log(this);
    }
 });

我已经尝试过这段代码，但它会更快地调用代码生成 HTML。

Answer 1

var li = $("<li>",{
    id: "print"            //the second parameter accepts properties as an object
}).on('click',function(e){ //.on() binds the event to that element
    console.log(this);
});

或者：

var li = $("<li>",{
    id: "print"            //the second parameter accepts properties as an object
    click: function(e){    //attach the event as part of the properties
        console.log(this);
    }
});

Answer 2

试试这个：

var li = $('<li>').attr({
    id: "print"
}).click(function() {
    alert(this);
    consol.log(this);
});

Answer 3

您可以使用 .on() 将事件绑定到标签

一个例子：

$('li#print').on('click',function(e){
  alert("Something" + $(this));

});

Answer 4

使用“点击”方法。

var li = $("<li>").attr({
   id: "print"
}).click(function(e) {
   alert(this);
   console.log(this);
});

或者，如果您想将事件附加到动态生成的元素，请使用$.live函数。如果您使用 jQuery mobile，我必须说另一个答案。

Answer 5

您可以使用事件冒泡并将委托的事件侦听器附加到父节点。这样做，您可以在将元素实际添加到 DOM 之前附加事件侦听器。

或者，您可以在尝试附加事件侦听器之前将元素附加到 DOM：

$("<li>")
    .attr({ id: "print"})
    .appendTo("body") // Or wherever you want to put it
    .on("click", function(e){
       alert(this);
       console.log(this);
    });