Javascript：无法访问函数外部的响应对象和动态生成的html元素

debugcn 发表于 Dev

ms394

我正在使用Django + Ajax创建待办事项应用程序。在加载时，我正在从数据库加载所有任务并显示它，当用户单击任何任务时，我要将其标记为已完成。我面临的问题是

我无法在buildList（）函数之外访问动态生成的html元素和响应对象。
当我将事件侦听器添加到任务（具有class = title的span元素）时，我无法访问任务对象，因此可以使用ajax请求将其发送到后端并使用它。

all.js

buildList()

function buildList(){
    var wrapper = document.querySelector("#list-wrapper")
    wrapper.innerHTML = ''
    var xhr = new XMLHttpRequest()
    xhr.open('GET', 'http://127.0.0.1:8000/api/task-list/', true)
    xhr.onload  = function(){
        if(this.status==200){
            var list = JSON.parse(this.response)
            for (var i in list){
                var item = `
                    <div id="data-row-${i}", class="task-wrapper flex-wrapper">
                        <div style="flex:7">
                            <span class="title">${list[i].title}</span>
                        </div>
                        <div style="flex:1">
                            <button class="btn btn-sm btn-outline-info edit">Edit</button>
                        </div> 
                        <div style="flex:1">
                            <button class="btn btn-sm btn-outline-dark delete">-</button>
                        </div>
                    </div>
                `
                wrapper.innerHTML += item
            }

            for(i in list){
                var tasks = document.querySelectorAll('.title')
                tasks.forEach(function(el, list){
                    el.addEventListener('click',()=>{
                        console.log(list[i])
                    })
                })


            }
        }
    }
    xhr.send()
}

// Addding a Task //
var form = document.querySelector("form")
form.addEventListener('submit', (e)=>{
        e.preventDefault()
        var title = document.getElementById('title').value
        var xhr = new XMLHttpRequest()
        xhr.open('POST', 'http://127.0.0.1:8000/api/task-create/', true)
        xhr.setRequestHeader('Content-type','application/json')
        xhr.setRequestHeader('X-CSRFToken',csrftoken)
        xhr.onload = function(){
            if(this.status==200){
                buildList() 
                document.getElementById('form').reset()
            }
        }
        xhr.send(JSON.stringify({"title":title}))
    }
)

// Marking a task as complete //
function taskComplete(e){
    console.log(e.target)
}

index.html

<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'styles.css' %}">
    <title>To Do</title>

</head>
<body>
    <div class="container">

        <div id="task-container">
            <div id="form-wrapper">
                <form id="form">
                    <div class="flex-wrapper">
                        <div style="flex: 6">
                            <input id="title" class="form-control" type="text" name="title" placeholder="Add task">
                        </div>
                        <div style="flex: 1">
                            <input id="submit" class="btn" type="submit" >
                        </div>
                    </div>
                </form>
             </div>

            <div id="list-wrapper">

            </div>  
        </div>
    </div>
</body>
<script src="{% static 'todo.js' %}"></script>
</html>

卡洛斯

看起来，当您添加事件侦听器时，您想访问一个以list获取的数据命名的变量，但是在该词法作用域中list已分配了一个回调参数。我的建议是重命名回调参数。然后，您可以list从父范围访问。