why, by clicking on the span, its text is not thrown into the input? javascript, jquery

Question

why, by clicking on the span, its text is not thrown into the input?

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>

error in devtools:

?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)

what is wrong with addEventListener?

Answer 1

There are several problems with the approach.

1. You have a loop with multiple i values and only use value of the last one after loop completes
2. Trying to use querySelector() before the html string is inserted in document
3. Using # in the element id="#service

A better approach would be to use a common class name and event delegation instead.

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

Then outside of the $('#ajax-service').keyup.. do:

$(document).on('click', '.service-list-item', function(e){
   $('#ajax-service').val( $(this).text());
});

Understanding Event Delegation