代码之家  ›  专栏  ›  技术社区  ›  JopaBoga

为什么通过单击span,它的文本不会被抛出到输入中?javascript、jquery

  •  0
  • JopaBoga  · 技术社区  · 3 年前

    为什么,点击 span ,它的文本不会被抛出到 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>
    

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

    1 回复  |  直到 3 年前
        1
  •  2
  •   charlietfl    3 年前

    1. 你有一个多重循环 i 值,并且仅在循环完成后使用最后一个值
    2. querySelector() 在将html字符串插入文档之前
    3. 在元素中使用# id="#service

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

    然后在外面 $('#ajax-service').keyup..

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

    Understanding Event Delegation