web-dev-qa-db-ja.com

Jquery：クリックイベントは追加後に機能しません。 （.ONの使用方法がわからない）

2つのクリックイベントがあります。別のクリックイベントを含む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の使用方法がわかりません。

jqueryappend
19
user2669261

以前は、この種のことをしたliveまたはdelegate関数でした。これで次のようにできます：

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

//do whatever

});
46
Phillip Schmidt

jQueryのon は多くのことを行いますが、特定のケースでは、DOMがロードされた後にロードされないDOMオブジェクトに「オン」にする必要があります。これにより、イベントがこの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で取得できる限り低いことが重要であることに注意してください。たとえば、セレクタを「本文」またはドキュメントレベルに配置することは好ましくありません。これを覚えておいてください。

うまくいけば、これがあなたが何をしたいのかについてのより良い理解を与えるでしょう。 IhighlyjQueryのドキュメントは非常に良いので読むことをお勧めします。

11
JasCav

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

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

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

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

2
Mateusz