javascript - Python3 + Django : How to use Jquery in render_to_string template?

Question

我的酱汁在下面。

使用 render_to_string 创建的模板中的元素不是 Jquery 控件。

▶ 索引.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;
    });
});

▶ View .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控件？

Answer 1

问题是您已在 'a[name=btn_like]' 上设置了处理程序，但它已在 DOM 就绪时分配；因此通过 Ajax 加载的新元素不会链接到处理程序。相反，将处理程序分配给更高的元素并使用委托(delegate)。

$('#prod_list').on('click', 'a[name=btn_like]', function(data) ...