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 モバイルを使用している場合は、別の答えを言わなければなりません。

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