1

jQuery ループ内で、LI 要素に含まれる動的に作成されたアンカー タグにクリック イベントをアタッチしようとしています。LI 自体は、静的 UL 要素内で動的に作成されます。何らかの理由で、アンカーをクリックしても何も発生しません。問題のあるコードの簡略版を次に示します。

$.each($.MyProject.cities, function (index, city) {
    $('<li></li>').html($("<a></a>").attr("href", "javascript:void(0)").click(function (event) {
        console.info("Anchor clicked!");
        event.preventDefault();
        return false;
    }).html($("<span></span>").text(city.FullName).attr("class", "autoText"))).appendTo($("#visiblecities"));
});

ここで、visiblecities は UL 要素の ID であり、cities はループが繰り返されるコレクションです。

クリックイベントが機能しない理由は何ですか?

4

3 に答える 3

4

イベント委任を使用して、コードの実行後<a>に要素が追加された場合でも、すべての要素に反応する単一のイベント ハンドラーを設定します。

$('#visibleCities').on('click', 'a', function(event) {
    console.info('Anchor clicked!');
    event.preventDefault();
    return false;
});

ただし、コメントでgdoronが述べたように、<a>要素には現在コンテンツがないため、実際にはクリックできません。

于 2013-02-25T11:29:04.383 に答える
1

を使用します.on。

$('a').on('click',function(){
   //code here
});

試す

$('li a').on('click',function()
{
    //code here
});

$.each($.MyProject.cities, function (index, city)
{
    $('<li></li>').html($("<a></a>").attr("href", "javascript:void(0)")).appendTo($("#visiblecities"));
});
于 2013-02-25T11:27:21.743 に答える
0

クリックの代わりにライブメソッドを使用する

 $.each($.MyProject.cities, function (index, city) {
        $('<li></li>').html($("<a></a>").attr("href", "javascript:void(0)").live("click",function (event) { console.info("Anchor clicked!"); event.preventDefault(); return false; })).appendTo($("#visiblecities"));
    });
于 2013-02-25T11:23:47.923 に答える