如何用jQuery为循环生成的动态id按钮实现内部元素类切换功能

问题原因 #

你的代码无法生效的核心原因是{{i.id}}是模板引擎的循环变量，仅在模板的{% for %}循环作用域内会被替换为实际的id值，放在循环外的独立JS代码中无法被正确解析，且你写的选择器还缺少了id选择器必须的#前缀。

最优解决方案 #

不需要绑定每个按钮的id，直接给所有同类按钮加一个公共类名，利用jQuery的$(this)指向当前点击元素的特性统一绑定事件即可，实现简单且性能更高：

1. 先修改模板代码，给按钮加公共类toggle-icon-btn：

{% for i in X %}
<button id="{{i.id}}" class="toggle-icon-btn"><i class="class1"></i></button>
{% endfor %}

2. 修改jQuery代码，用公共类选择器绑定事件：

$(document).ready(function(){
    $(".toggle-icon-btn").click(function(){
        // toggleClass支持同时传入多个类名，可简化写法
        $(this).find('i').toggleClass('class1 class2');
    });
});

动态生成元素兼容方案 #

如果按钮是页面加载完成后异步插入的（比如后端接口返回后才渲染），可以用事件委托的写法保证所有新增的同类按钮都能触发事件：

$(document).ready(function(){
    $(document).on('click', '.toggle-icon-btn', function(){
        $(this).find('i').toggleClass('class1 class2');
    });
});

不推荐的id绑定方案 #

如果一定要通过id绑定事件，需要把JS代码也放到模板循环内输出，这种方案会生成大量重复的JS代码，性能很差，仅做参考：

{% for i in X %}
<script>
$(document).ready(function(){
    $("#{{i.id}}").click(function(){
        $(this).find('i').toggleClass('class1 class2');
    });
});
</script>
{% endfor %}

内容的提问来源于stack exchange，提问作者andrew