为什么，通过单击跨度，其文本不会被抛出到输入中？javascript，jquery

为什么，通过单击

span

，其文本不会被抛出

输入

html

 <script>
        $(document).ready(function () {
            $('#ajax-service').keyup(function () {
                $.ajax({
                    data: $(this).serialize(), 
                    url: "{% url 'ajax_request' %}",
                    success: function (response) {
                        if (response.is_exist == true) {
                            let list = ''
                            for (var i in response.is_taken) {
                                list = list + '<span name="'+(response.is_taken[i])+'" id="#service'+(i)+'">'+(response.is_taken[i])+'</span> '
                                }
                            let elem_input = document.querySelector("#ajax-service")
                            let elem = document.querySelector("#service"+i);
                            $('#ajax-service-list').remove();
                            $('#ajax-service').after('<div id="ajax-service-list" name="ajax-service-list">'+(list)+'</div>')
                             elem.addEventListener("click", function(e){
                               elem_input.value = e.target.getAttribute("name");
                                });
                        }
                        else {
                             $('#ajax-service-list').remove();
                            $('#ajax-service').after('<div id="ajax-service-list" name="ajax-service-list"><span class="badge rounded-pill bg-warning text-dark" id="ajax-service-list">Нет совпадений</span></div>')
                        }
                    },
                    error: function (response) {
                        console.log(response.responseJSON.errors)
                    }
                });
                return false;
            });
        })
    </script>

$（文档）.ready（函数（）{
$（'#ajax服务'）.keyup（函数（）{
$.ajax({
数据：$（this）.serialize（），
url:“{%url'ajax_请求'%}”，
成功：功能（响应）{
if（response.is_exist==true）{
让列表=“”
for（var i响应。是否采用）{
list=list+''+（回复为[i]）+''
}
让elem#u input=document.querySelector（“ajax服务”）
设elem=document.querySelector（#service“+i）；
$（“#ajax服务列表”）.remove（）；
$（'#ajax服务'）。在（''+（列表）+''之后
元素addEventListener（“点击”，函数（e）{
elem_input.value=e.target.getAttribute（“名称”）；
});
}
否则{
$（“#ajax服务列表”）.remove（）；
$（“#ajax服务”）。在（'href\\\\\\\\\\\\\\\\\\\\\\\\\'
}
},
错误：函数（响应）{
console.log（response.responseJSON.errors）
}
});
返回false；
});
})

开发工具中出现错误：

?category=simple:151 Uncaught TypeError: Cannot read property 'addEventListener' of null
    at Object.success (?category=simple:151)
    at c (jquery-3.6.0.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-3.6.0.min.js:2)
    at l (jquery-3.6.0.min.js:2)
    at XMLHttpRequest.<anonymous> (jquery-3.6.0.min.js:2)

？category=simple:151未捕获类型错误：无法读取null的属性“addEventListener”
在Object.success（？category=simple:151）
at c（jquery-3.6.0.min.js:2）
在Object.fireWith[as resolveWith]（jquery-3.6.0.min.js:2）
在l（jquery-3.6.0.min.js:2）
在XMLHttpRequest。（jquery-3.6.0.min.js:2）

---

addEventListener有什么问题？

该方法存在几个问题

您有一个包含多个

i

值的循环，并且仅在循环完成后使用最后一个值

在将html字符串插入文档之前尝试使用

querySelector（）

在元素

id=“#服务

更好的方法是使用公共类名和事件委派

'<span class="service-list-item">'+(response.is_taken[i])+'</span>'; 

---

这种方法有几个问题

您有一个包含多个

i

值的循环，并且仅在循环完成后使用最后一个值

在将html字符串插入文档之前尝试使用

querySelector（）

在元素

id=“#服务

更好的方法是使用公共类名和事件委派

'<span class="service-list-item">'+(response.is_taken[i])+'</span>'; 

---

id=“#service'+

散列仅在选择器中使用，因此这应该是

id=“service'+

您不能在dom中查询尚未插入的元素yet@charlietfl，不是。在插入dom之后？在使用

之前，我必须使用childAppend？@JopaBoga您正在执行的
document.querySelector（“#service”+i）
，
after（）
id=“#service”+
哈希仅在选择器中使用，因此这应该是
id=“service”+
您不能查询dom中未插入的元素yet@charlietfl,不是。在插入dom之后？在使用
.after（）
之前，我必须使用您正在执行的
document.querySelector（#service“+i）
。