Python3 + Django:如何在 render_to_string 模板中使用 Jquery?
Python3 + Django : How to use Jquery in render_to_string template?
下面是我的酱汁
使用 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控件?
问题是您已经在 'a[name=btn_like]'
上设置了处理程序,但它已在 DOM 上分配就绪;因此通过 Ajax 加载的新元素不会链接到处理程序。相反,将处理程序分配给更高的元素并使用委托。
$('#prod_list').on('click', 'a[name=btn_like]', function(data) ...
下面是我的酱汁
使用 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控件?
问题是您已经在 'a[name=btn_like]'
上设置了处理程序,但它已在 DOM 上分配就绪;因此通过 Ajax 加载的新元素不会链接到处理程序。相反,将处理程序分配给更高的元素并使用委托。
$('#prod_list').on('click', 'a[name=btn_like]', function(data) ...