web-dev-qa-db-ja.com

jQueryで追加された要素のクリックイベントを処理する

次の方法を使用して、ページにいくつかの要素を生成しました。例えば、

$("#button"+caption).click(function(){
        var firstDisplay = '<div id="firstDisp'+caption+'"><ul>';
        for(var i=0;i<parents.length;i++){
            firstDisplay=firstDisplay+'<li class="fClick">'+parents[i]+'</li>';
        }
        firstDisplay=firstDisplay+'</ul></div>';
        $(firstDisplay).dialog();
});

そして、私はそのように「fClass」のonclickイベントを作成すると：

$(".fClick").click(function(){
    alert("hey!");
});

動作しません！ただし、.dialog（）の直後に他の関数内にonclick関数を配置すると、機能します！この方法で多くの要素を作成しているため、すべてのonclickイベントを単一のメソッドに入れることはできません。これを回避する方法はありますか？ .appendメソッドでも同じ問題が発生しています。

jqueryonclickappend
24
Eddard Stark

使用しているjQueryのバージョンに基づいて、.onまたは.delegateに変更します。

jQuery 1.7以降

$(document).on('click', '.fClick', function(){ 
    alert("hey!");
});

古いjQueryバージョンの場合、デリゲートを使用します

$(document).delegate('.fClick', 'click', function(){
    alert("hey!");
});
68
Selvakumar Arumugam

Vegaが言ったことは完全に機能しています。ヒントがあります：2行目に間違いがあると思います。レンダリングにidまたはclassを配置できないため、おそらくaddClassメソッドを使用できます。次に例を示します。

var content = "<div>Hello, World</div>";
$("div").after(content);
$("last:div").addClass("mydiv");

クラスが追加されますが、IDを追加できるかどうかはわかりません。

0
user4710450

onの代わりにclickを使用します。

_$(".fClick").on('click',function(){
  alert("hey!");
}); 
_

clickは、$('.fClick').click({...})を呼び出したときに存在する_.fClick_要素にクリックハンドラーを追加します。後で追加された新しい_.fClick_要素には、クリックイベントがありません。ただし、onを使用すると、後で追加された場合でも、すべての_.fClick_要素にクリックハンドラーがあります。
詳細はこちら： http://api.jquery.com/on/

0
Abraham

$（document）.ready（function（）を再度呼び出して、そこにコードを追加します。ドキュメントは再び読み取られ（更新され）、そこにコードを適用するだけです。

0
DenniZr