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?
Advertisement
Answer
There are several problems with the approach.
- You have a loop with multiple
i
values and only use value of the last one after loop completes - Trying to use
querySelector()
before the html string is inserted in document - 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()); });