3

クラスクリックリスナーを作成できるかどうかを調べようとしています。divリスナーを作成するときは、最初にリスナーを追加し、その後divを作成できます。

したがって、最初にリスナーを作成し、後でクラスを追加します。出来ますか？

html：

<div>
    <div id="1">
        <div id="2">
            <!-- will be created.. -->
        </div>
    </div>
</div>

js：

$(".welcome").click(function() {
    alert("Hi there");
});

// Later the class album will be loaded
// When you put it above it will work..
welcome = document.getElementById("2");
welcome.innerHTML = '<div id="3" class="welcome"> Hello</div>';

テストするためにjsfiddleを作成しました。

4

4 に答える 4

3

あなたはこれを達成することができます。jQueryでは、このパターンは委任されたイベントと呼ばれます。#2クリックハンドラーを要素にアタッチできます。これは、.welcome要素が追加されると使用可能になります。これを試して：

$('#2').on('click', '.welcome', function() {
    alert("Hi there");
});

更新されたフィドル

あなたのフィドルで、jQueryメソッドを使用するようにプレーンなjavaScriptも修正したことに注意してください。あなたがそれらを持っているならば、あなたはそれらを使うほうがよいでしょう。

于 2013-01-23T10:32:56.273 に答える
2

はい、イベント委任を使用して可能です：

$(document).on('click', '.welcome', function(e) {
    alert("Hi there");
});

document委任されたイベントハンドラーをアタッチするためにを使用しました。これは、ページ上のどこにあるかに関係なく、セレクターに一致するすべての要素を取得するためです。.welcomeただし、一致させたいすべての要素を含む最も近い静的要素を使用するのが理想的です。

于 2013-01-23T10:31:51.373 に答える
2

はい...イベントデリゲートで使用します...

イベントハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが.on（）を呼び出すときにページに存在している必要があります。要素が存在し、選択できることを確認するには、ページのHTMLマークアップにある要素のドキュメントレディハンドラー内でイベントバインディングを実行します。新しいHTMLがページに挿入されている場合は、要素を選択し、新しいHTMLがページに配置された後にイベントハンドラーをアタッチします。または、次に説明するように、委任されたイベントを使用してイベントハンドラーをアタッチします。

これを試して

 $(document).on('click','.welcome',function() {
    alert("Hi there");
 });

さらに良いのは、uがイベントを最も近い要素にアタッチした場合です...あなたの場合、それはid＃2のdivです<div id=2>

$('#2').on('click', '.welcome', function() {
   alert("Hi there");
});

ここをいじる

于 2013-01-23T10:32:08.733 に答える
0

ページの準備ができたときにdomで利用できる最も近い既存の親に委任する必要があります。

$('div[id="2"]').on('click', '.welcome', function(e) {
    alert("Hi there");
});
于 2013-01-23T10:37:53.093 に答える