jquery - カスタム クリック イベントを持つリンクを li に追加します

Question

カスタムクリックイベントを持つリンクを含むリストにli要素を追加しようとしています...次のようなことを試みています:

<div id="myid"><ul></ul></div>

$('#myid ul').append("<li><a href=''>Link</a></li>").click(function(){alert('hi')})

ただし、クリック イベントはa hrefではなくliにあります。これを修正するにはどうすればよいですか?

Answer 1

実際には、クリック イベント ハンドラーはul要素にバインドされています。

これを修正するにはどうすればよいですか?

aそれを要素にバインドします。

$("<li><a href=''>Link</a></li>").find('a').click(function(event) {
    event.preventDefault(); // <-- if you don't want the browser follow the link
    alert('hi');
}).end().appendTo('#myid ul');

デモ

ただし、リンクを個別に作成する方がクリーンな場合があります。

$('<a />', {
    text: "Link",
    href: "",
    click: function() {/*...*/}
}).wrap('<li />').parent().appendTo('#myid ul');

使用されるメソッドに関する情報は、jQuery API ドキュメントにあります。

Answer 2

.onあなたのliはその場で追加されているので、あなたは使うことができます

 $('#myid ul').append('<li id="li1"><a href=''>Link</a></li>');

    $('body').on('click','#li1',function(){
         alert('hi');
    });

Answer 3

$('#myid ul').append("<li><a href=''>Link</a></li>");

$("a").live("click", function() { // or use on(...)
    alert('hi');
});

追加後、ライブでクリックを a 要素にバインドします。Jsfiddle はこちら: http://jsfiddle.net/reygonzales/Z5pSC/

Answer 4

$('#myid ul').append("<li><a href=''>Link</a></li>")
     .find("a:last").click(function(){
         alert('hi')
})​​​​;