Question

我的酱汁在下面。

使用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>

我想要控制＆＃39; btn_like＆＃39;元件

但是，我无法控制＆＃39; a [name = btn_like]＆＃39;

如何在render_to_string模板的元素中使用Jquery Control？

Answer 1

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

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

Python3 + Django：如何在render_to_string模板中使用Jquery？

1 个答案: