Javascript 按钮的addEventlistener不能与多个按钮一起正常工作
我想创建一个脚本，可以通过事件侦听器Javascript 按钮的addEventlistener不能与多个按钮一起正常工作,javascript,addeventlistener,Javascript,Addeventlistener,我想创建一个脚本，可以通过事件侦听器drop上传文件 每次删除文件时，都必须使用“保存/编辑”按钮创建一个新的表行。这些按钮需要事件监听器来执行单击，但问题是事件监听器仅对添加到表中的最后一个按钮起作用 我对我的问题做了一个简单的例子。函数clickEventSaveButton（）包含一个带有匿名函数的.addEventlistener。目前，它只执行控制台日志，但只执行最后一个表行中的按钮。每次创建新按钮时，旧按钮都会停止工作 JS: 'use strict'; const dragAre
drop单击clickEventSaveButton（）.addEventlistener'use strict';
const dragArea = document.getElementById('dragArea');
const fileTable = document.getElementById('fileTable');
const fileTableBody = fileTable.querySelector('tbody');
let id = 0;
dragArea.addEventListener('dragover', (e) => {
e.preventDefault();
e.stopPropagation();
});
dragArea.addEventListener('drop', (e) => {
e.preventDefault();
e.stopPropagation();
// Add table row
fileTableBody.innerHTML += createFileTableRow(id, 'placeholder');
clickEventSaveButton(id);
id++;
});
function clickEventSaveButton(id) {
let saveButton = document.querySelector('.file-save a[data-id="'+id+'"]');
console.log(saveButton);
console.log(id);
saveButton.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
console.log('Save Button (ID:'+id+') pressed!');
});
}
function createFileTableRow(id, name) {
return `
<tr data-id="${id}">
<td class="file-name">${name}</td>
<td class="file-save">
<a data-id="${id}" class="button is-info is-small">Save</a>
</td>
</tr>
`;
};
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="script-src 'self';">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
<script defer src="test.js"></script>
</head>
<body>
<div class="columns"><div class="column is-half is-offset-one-quarter">
<h1>Work in progress</h1>
<div id="dragArea" class="box has-background-info-light has-text-centered py-6">
Drag .xlsx files here!
</div>
<hr>
<h3 id="fileTableTitle">No files loaded...</h3>
<table id="fileTable" class="table table is-fullwidth is-hoverable">
<thead><tr><th>File</th><th>Save File</th></tr></thead>
<tbody></tbody>
</table>
<hr>
</div></div>
</body>
</html>
fileTableBody.insertAdjacentHTML('beforeend', createFileTableRow(id, 'placeholder'));
“严格使用”；
const dragArea=document.getElementById（'dragArea'）；
const fileTable=document.getElementById（'fileTable'）；
const fileTableBody=fileTable.querySelector（'tbody'）；
设id=0；
dragArea.addEventListener（'dragover'，（e）=>{
e、 预防默认值（）；
e、 停止传播（）；
});
dragArea.addEventListener（'drop'，（e）=>{
e、 预防默认值（）；
e、 停止传播（）；
//添加表行
fileTableBody.innerHTML+=createFileTableRow（id为“占位符”）；
单击事件保存按钮（id）；
id++；
});
功能clickEventSaveButton（id）{
让saveButton=document.querySelector（'.file保存一个[data id=“'+id+'”）；
console.log（保存按钮）；
console.log（id）；
saveButton.addEventListener（'单击'，（e）=>{
e、 预防默认值（）；
e、 停止传播（）；
log（'Save按钮（ID:'+ID+'）按下！'）；
});
}
函数createFileTableRow（id，名称）{
返回`
${name}
拯救
`;
};
'use strict';
const dragArea = document.getElementById('dragArea');
const fileTable = document.getElementById('fileTable');
const fileTableBody = fileTable.querySelector('tbody');
let id = 0;
dragArea.addEventListener('dragover', (e) => {
e.preventDefault();
e.stopPropagation();
});
dragArea.addEventListener('drop', (e) => {
e.preventDefault();
e.stopPropagation();
// Add table row
fileTableBody.innerHTML += createFileTableRow(id, 'placeholder');
clickEventSaveButton(id);
id++;
});
function clickEventSaveButton(id) {
let saveButton = document.querySelector('.file-save a[data-id="'+id+'"]');
console.log(saveButton);
console.log(id);
saveButton.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
console.log('Save Button (ID:'+id+') pressed!');
});
}
function createFileTableRow(id, name) {
return `
<tr data-id="${id}">
<td class="file-name">${name}</td>
<td class="file-save">
<a data-id="${id}" class="button is-info is-small">Save</a>
</td>
</tr>
`;
};
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="script-src 'self';">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
<script defer src="test.js"></script>
</head>
<body>
<div class="columns"><div class="column is-half is-offset-one-quarter">
<h1>Work in progress</h1>
<div id="dragArea" class="box has-background-info-light has-text-centered py-6">
Drag .xlsx files here!
</div>
<hr>
<h3 id="fileTableTitle">No files loaded...</h3>
<table id="fileTable" class="table table is-fullwidth is-hoverable">
<thead><tr><th>File</th><th>Save File</th></tr></thead>
<tbody></tbody>
</table>
<hr>
</div></div>
</body>
</html>
fileTableBody.insertAdjacentHTML('beforeend', createFileTableRow(id, 'placeholder'));
试验
正在进行的工作
将.xlsx文件拖到这里！
没有加载文件。。。
文件保存文件
insertAdjacentHTMLinnerHTML'use strict';
const dragArea = document.getElementById('dragArea');
const fileTable = document.getElementById('fileTable');
const fileTableBody = fileTable.querySelector('tbody');
let id = 0;
dragArea.addEventListener('dragover', (e) => {
e.preventDefault();
e.stopPropagation();
});
dragArea.addEventListener('drop', (e) => {
e.preventDefault();
e.stopPropagation();
// Add table row
fileTableBody.innerHTML += createFileTableRow(id, 'placeholder');
clickEventSaveButton(id);
id++;
});
function clickEventSaveButton(id) {
let saveButton = document.querySelector('.file-save a[data-id="'+id+'"]');
console.log(saveButton);
console.log(id);
saveButton.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
console.log('Save Button (ID:'+id+') pressed!');
});
}
function createFileTableRow(id, name) {
return `
<tr data-id="${id}">
<td class="file-name">${name}</td>
<td class="file-save">
<a data-id="${id}" class="button is-info is-small">Save</a>
</td>
</tr>
`;
};
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="script-src 'self';">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
<script defer src="test.js"></script>
</head>
<body>
<div class="columns"><div class="column is-half is-offset-one-quarter">
<h1>Work in progress</h1>
<div id="dragArea" class="box has-background-info-light has-text-centered py-6">
Drag .xlsx files here!
</div>
<hr>
<h3 id="fileTableTitle">No files loaded...</h3>
<table id="fileTable" class="table table is-fullwidth is-hoverable">
<thead><tr><th>File</th><th>Save File</th></tr></thead>
<tbody></tbody>
</table>
<hr>
</div></div>
</body>
</html>
fileTableBody.insertAdjacentHTML('beforeend', createFileTableRow(id, 'placeholder'));
fileTableBody.innerHTML+=…innerHTMLinsertAdjacentHTML（）insertAdjacentElement（）