24

私は2つのクリックイベントを持っています。1 つは、別のクリック イベントを含む IMG を追加します。明らかに機能しません。jQuery の .ON を使用する必要があることはわかっていますが、その方法と場所がわかりません。

私のコード:

$( document ).ready(function() {
    // The one below (.choimh) isn't triggered anymore
    $('.choimg').click(function(){

    });

    // Switch to chosen color
    $('.color').click(function(){
        $(".thumbs").append('<a href="#"><img id="image'+u+'" class="choimg" src="/img/products/mini/'+colnumber+'-'+ i + '.jpg" />');
    });
});

.color div は、.choimg とはまったく別の場所にあります。

.ON の使い方がわかりません。

4

3 に答える 3

59

以前は、このようなことを行っていたのはliveordelegate関数でした。これで、次のように実行できます。

$(document).on('click', '.choimg', function(e) {

//do whatever

});
于 2013-08-12T20:36:35.813 に答える
12

jQueryのonは多くのことを行いますが、特定のケースでは、DOMがロードされた後にロードされないDOMオブジェクトに「on」を配置したいとします。これにより、イベントがこの DOM オブジェクトにバブルアップし、提供された 2 番目のセレクターに基づいてイベントが適切な DOM アイテムに委任されます。

上記のリンクをたどると、jQuery ドキュメントに大量の情報があります。具体的には、これはあなたのケースにとって重要です...

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

いずれにせよ、すでに存在するものにバインドし、実際のイベント、イベント、および機能を追加するために追加するものに 2 番目のセレクターを提供する必要があります。このようなもの...

$('#selector-to-thing-that-exists').on('click', '.thing-that-will-be-added-later', function() {
  alert('Do stuff here!');
});

「存在するもの」は、効率のためにDOMで取得できる限り低いことが重要であることに注意してください。たとえば、セレクターを「本文」またはドキュメント レベルに配置することは好ましくありません。これを覚えておいてください。

これにより、何をしたいのかについて少し理解が深まると思います。jQuery のドキュメントは非常に優れているため、読むことを強くお勧めします。

于 2013-08-12T20:41:44.403 に答える
4

次のようなものを使用する必要があります。

$(document).on("click", ".color", function() {
//append code here
});

一般的なプロトタイプはon(eventType, selector, function)、他のイベントも使用できます。

詳細については、これを参照してください。

于 2013-08-12T20:37:09.457 に答える