1

私のソースは以下です。

render_to_string を使用して作成されたテンプレート内の要素は、Jquery コントロールではありません。

▶ index.html

{% extends 'common/base.html' %}
{% block contents %}
<section>
    <div class="main-goods-area">
        <div class="container" id="prod_list">
        </div>
    </div>
</section>
{% endblock %}

{% block jquery %}
    <script src="{% static 'js/index.js' %}"></script>
{% endblock %}

▶ index.js

$(function() {
    show_inf_list('0','0','0','0','0');
    function show_inf_list(section, selection, ordering, start, limit){
        $.ajax({
            url:'/campaign/list/',
            data:{
                'campaign_section': section,
                'selection_type': selection,
                'ordering_type': ordering,
                'start': start,
                'limit': limit
            },
            dataType:'json',
            success: function (data) {
                $('#prod_list').html(data.campaign_list);
            }
        });
    }

    $('a[name=btn_like]').on('click', function (e) {
        e.preventDefault()
        console.log('a');
        return false;
    });
});

▶views.py

def ...
    data['campaign_list'] = render_to_string(
        'main/include/prod_list.html',
        context=context,
        request=request
    )
    return JsonResponse(data)

▶ prod_list.html

<div class="ic-area">
    <ul>
        <li>
            <a href="" name="btn_like" data-id="{{ campaign.id }}">
                {% if user.influencer in campaign.like_users.all %}
                    <i class="ic_heart_small active"></i>
                {% else %}
                    <i class="ic_heart_small"></i>
                {% endif %}
            </a>
        </li>
    </ul>
</div>

「btn_like」要素を制御したい

しかし、「a[name=btn_like]」を制御することはできません

render_to_string テンプレートの要素で Jquery コントロールを使用するには?

4

1 に答える 1

0

問題は、ハンドラーをオンに設定した'a[name=btn_like]'が、DOM 対応で割り当てられていることです。そのため、Ajax 経由で読み込まれた新しい要素はハンドラーにリンクされません。代わりに、ハンドラーを上位の要素に割り当て、委任を使用します。

$('#prod_list').on('click', 'a[name=btn_like]', function(data) ...
于 2017-12-22T10:22:15.053 に答える