前端起步：写的js点击事件没发生？

Question

界面前端按钮代码（django的模板）<span class="icon">     <i class="fas fa-plus-square" id="add_detail{{ i }}"></i> </span>js代码：function detail_item_add(evt) {     console.log(evt.target.id) } var section=document.getElementById('add_detail1'); section.addEventListener('click',detail_item_add);js文件确定引入了我点击对应的按钮后，控制台并没有任何反映啊补充完整的一段循环代码<div> <span class="icon">     <i class="fas fa-plus-square" id="add_detail{{ i }}"></i> </span>         <span class="icon is-large" id="reduce_detail{{ i }}">     <i class="fas fa-minus-square"></i> </span>         <nav class="level">             <div class="level-left">                 <div class="field has-addons">                     <div class="control">                         <label class="button is-primary">选择类型</label>                     </div>                     <div class="control is-expanded">                         <div class="select is-fullwidth">                             {{ product_detail_form.selectType }}                         </div>                     </div>                 </div>             </div>             <div class="level-right">                 <div class="field">                     <div class="field has-addons">                         <div class="control">                             <label class="button is-primary">序号</label>                         </div>                         <div class="control input" id="sequence{{ i }}">                             {{ i }}                             {#                                            {{ product_detail_form.order }}#}                         </div>                     </div>                     {#                                    <p class="help is-danger">{{ product_detail_form.errors.order }}</p>#}                 </div>             </div>         </nav>         <div class="field">             <div class="field has-addons">                 <div class="control ">                     {{ product_detail_form.placeholder }}                 </div>                 <div class="control">                     <label class="button is-primary is-large">描述</label>                 </div>                 <p class="help is-danger">{{ product_form.errors.placeholder }}</p>             </div>         </div>         <div class="field">             {{ product_detail_form.image }}         </div>         <div class="field">             <label class="label is-medium">                 选择项                 <span class="icon" id="add_item{{ i }}">             <i class="fas fa-plus-square"></i>         </span>             </label>             <div class="field has-addons">                 <input class="input is-medium" type="text" placeholder="请输入">                 <div class="control is-large">         <span class="icon is-large">             <i class="fas fa-minus-square"></i>         </span>                 </div>             </div>         </div>         <div class="field">             <label class="label">描述</label>             <div class="control">                 {{ product_form.centent }}             </div>             <p class="help is-danger">{{ product_form.errors.centent }}</p>         </div>     </div>