jquery - .on と .delegate を使用しても、jQuery は Ajax をロードした要素に適用されない

Question

私は Django を使用しており、Django Endless Pagination と Twitter スタイルの読み込みを使用しています。調査から読み取ったように、.on と .delegate を使用しているにもかかわらず、jQuery コードを新しく挿入された要素にバインドできません。.live は非推奨の状態であるため避けましたが、明らかに .on と .delegate はこの状況で同じことを行う必要があります。

基本的に、製品検索結果は、エンドレス ページネーションが注入しているカードとして表示されます。

関連するコード スニペット:

JS

$(".product-card").on('click',function() {

    cardToggle = $(this).data("switch");

    if (cardToggle==0) {
        // some stuff happens to the card
        $(this).data("switch", 1);
    }else if(cardToggle==1) {
        // some stuff un-happens to the card
        $(this).data("switch", 0);
    }
})

商品一覧（メインページにAjaxで読み込まれたテンプレート）

{% load static %}
{% load endless %}

{% paginate results %}
{% for result in results %}

    {# divs with class .product-card are created here, code for card removed because of prohibitive length #}

{% endfor %}
{% show_more %}